EaselJSを使用して範囲スライダでキャンバスシェイプを更新する

Question

EaselJSを使用してオブジェクトのプロパティを更新する際にキャンバスシェイプを再描画するにはどうすればよいですか？私はプロパティが更新されていることを確認しますが、私の描画関数はキャンバスをクリアしたり、新しい値でシェイプを再描画したりしていません。

JSFiddle

HTML

<canvas id="example" width="300" height="300"></canvas> 

<div> 
    <label>Width Size</label> 
    <input type="range" class="slider" min="0" max="300" step="5" value="300" data-var="width"> 
</div> 

<div> 
    <label>Height Size</label> 
    <input type="range" class="slider" min="0" max="300" step="5" value="5" data-var="height"> 
</div> 

JS

stage = new createjs.Stage("example"); 

var canvasObject = { 
    width: 300, 
    height: 5 
} 

var rect = new createjs.Shape(); 
rect.graphics.beginFill("#000").drawRect(0, 0, canvasObject.width, canvasObject.height); 

function draw() { 
    stage.clear(); 

    stage.addChild(rect); 

    stage.update(); 
} 

$('.slider').on("input", function() { 
    canvasObject[$(this).data("var")] = $(this).val();  
    draw(); 
}); 

$(document).ready(function() { 
    draw(); 
}); 

Answer 1

あなたは値が変化したら、あなたの四角形を再描画する必要がありますか、あなたは一度、そのプロパティを変更するには、コマンドアプローチを使用することができますそれは変更されました。

var rect = new createjs.Shape(); 
rect.graphics.beginFill("#000").drawRect(0, 0, canvasObject.width, canvasObject.height); 

// Store the last command (the drawRect) 
var rectCommand = rect.command; 

// On Change, update the command 
rectCommand.w = canvasObject.width; 
rectCommand.h = canvasObject.height; 

// Remember to update the stage when things change 
stage.update(); 

あなたはコマンドhere、およびコマンドのドキュメントhereに関する情報を見ることができます。

Answer 2

私が見つけた別の解決策は、Lannyの言葉に触れることです。描画関数内の四角形を削除して再描画するだけです。

function draw() { 

    stage.removeChild(rect); 
    rect = new createjs.Shape(); 

    rect.graphics.beginFill("#000000").drawRect(0, 0, canvasObject.width, canvasObject.height); 

    stage.clear(); 

    stage.addChild(rect); 

    stage.update(); 
} 

Working Example