在不减速的情况下重绘 EaselJS 圆段

Question

我试图在按下 space 栏时获得钟面的阴影轨迹以跟随时钟指针。每次刻度都重新绘制：

var stage, cont, arrow, cursorWedge, spacebarState, cursorWedgeStart, fired;

var msg = document.getElementById('state-msg');

var KEYCODE_SPACEBAR = 32;

spacebarState = false; // for cursor shadow wedge

stage = new createjs.Stage("canvas");
cont = stage.addChild(new createjs.Container());
cont.x = stage.canvas.width / 2;
cont.y = 250;
cont.rotation -= 90;
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 150);
circle.x = 0;
circle.y = 0;
cont.addChild(circle);
cont.setChildIndex(circle, 0);
arrow = new createjs.Shape();
arrow.graphics.beginFill("black").drawRect(0, 0, 150, 2);
cont.addChild(arrow);

cursorWedge = new createjs.Shape();

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);

document.body.addEventListener('keydown', function(e) {
  msg.textContent = 'keydown:' + e.keyCode;
  keyDown(e);
});

document.body.addEventListener('keyup', function(e) {
  msg.textContent = 'keyup:' + e.keyCode;
  keyUp(e);
});


function tick() {

  arrow.rotation += 1;

  if (spacebarState === true) {
    cursorWedge.graphics.moveTo(0, 0);
    cursorWedge.graphics.arc(0, 0, 150, cursorWedgeStart * Math.PI / 180, arrow.rotation * Math.PI / 180);
  }

  stage.update();
}


function keyDown(event) {

  switch (event.keyCode) {
    case KEYCODE_SPACEBAR:
      if (!fired) { //avoiding repeated events
        fired = true;
        cursorWedge.graphics.f(createjs.Graphics.getRGB(0, 0, 0, 0.25));
        spacebarState = true;
        cursorWedgeStart = arrow.rotation;
        cont.addChild(cursorWedge);
        cont.setChildIndex(cursorWedge, cont.getNumChildren() - 1);
      }

  }

}

function keyUp(event) {
  switch (event.keyCode) {
    case KEYCODE_SPACEBAR:
      fired = false;
      spacebarState = false;
      cursorWedge.graphics.clear();
      cont.removeChild(cursorWedge);
  }

}

<head>
  <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
</head>

<body>
  Keyboard message: <span id="state-msg"></span>
  <canvas id="canvas" width="500" height="400">   </canvas>
</body>

有什么方法可以在长按按键后重画圆弧段的速度不会明显变慢？

Answer 1

在您的代码中，您将在每个刻度中添加图形。这意味着每一帧都在绘制前一帧的图形加上新帧的图形。这是附加的，所以到第 100 帧时，每个刻度绘制 100 个弧，等等。

如果您不想创建叠加效果，只需在重新绘制之前清除图形即可：

cursorWedge.clear()
    .graphics.arc(0, 0, 150, cursorWedgeStart * Math.PI / 180, arrow.rotation * Math.PI / 180);

另一种方法是存储 graphics command，然后在 tick 上修改它。当舞台重绘时，它将使用图形更新值。

// In the init (at the top in your example)
var arcCommand = cursorWedge.graphics.moveTo(0,0)
    .graphics.arc(0, 0, 150, Math.PI / 180, 0).command; // returns the last command

// In your tick 
arcCommand.endAngle = arrow.rotation * Math.PI / 180;

如果你想要一个加法效果（我不相信你在这种情况下）添加每个刻度的图形仍然非常昂贵。您可以改为缓存形状所在的容器，然后每次添加 new 图形命令，并更新缓存。查看 Cache Update 演示，也可以在 GitHub.

中找到

在不减速的情况下重绘 EaselJS 圆段

Redrawing EaselJS circle segment without slowing down

javascript

html5-canvas

createjs

easeljs