Tuval Şeklini Aralık Kaydırıcı ile Güncelleme EaselJS Kullanarak Güncelleme

Question

Bir nesnenin özelliklerini güncelleştirirken tuval şeklini EaselJS ile nasıl yeniden çizerim? Özelliklerin güncellenmekte olduğunu görüyorum, ancak çizim işlevim tuvali temizlemiyor ya da şekli yeni değerlerle yeniden çiziyor.

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

Sen değer değişiklikleri kez dikdörtgen yeniden çizmek zorunda kalacak veya takvimi özelliklerini bir kez değiştirmek için komut yaklaşımı kullanabilirsiniz değiştirildi.

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

Sen komutları here ilgili bilgileri görebilirsiniz

ve komut docs here.

Answer 2

Bulduğum bir başka çözüm Lanny'nin bahsettiği şeye dokunuyor. Sadece çizim fonksiyonunun içindeki dikdörtgeni kaldırın ve yeniden çizin.

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