Question

如何在使用EaselJS更新对象的属性时重绘画布形状？我看到属性正在更新，但我的绘图功能不是清除画布或使用新值重绘形状。

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的信息，以及命令docs 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

使用EaselJS更新带范围滑块的画布形状

2 个答案: