Aktualisieren von Canvas Shape mit Range Slider Using EaselJS

Question

Wie würde ich eine Canvas-Form beim Aktualisieren der Eigenschaften eines Objekts mit EaselJS neu zeichnen? Ich sehe, dass die Eigenschaften aktualisiert werden, aber meine Zeichenfunktion löscht nicht die Zeichenfläche oder zeichnet die Form mit den neuen Werten neu.

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

müssen Sie entweder Ihr Rechteck, sobald die Wertänderungen neu zu zeichnen, oder können Sie den Befehl Ansatz verwenden, um seine Eigenschaften zu modifizieren einmal Es wurde geändert.

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(); 

Sie Informationen über Befehle here sehen können, und der Befehl docs here.

Answer 2

Eine andere Lösung, die ich gefunden habe, ist das Berühren von Lannys Erwähnung. Entfernen Sie einfach das Rechteck innerhalb der Zeichenfunktion und zeichnen Sie neu.

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