CODEWITHSUNDEEP
javascripthtml5-canvascreatejseaseljs
Matt B
Matt B

Reputation: 103

Redrawing EaselJS circle segment without slowing down

I am trying to get a shaded trace of a clock face to follow the clock hand when pressing the space bar. It's redrawn every tick:

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>

Is there any way of redrawing the circle segment without it markedly slowing down after the key is held for a longer time?

Upvotes: 0

Views: 244

Answers (1)

Lanny
Lanny

Reputation: 11294

In your code, you are adding to the graphics each tick. This means each frame is drawing the previous frame's graphics PLUS your new frame's graphics. This is additive, so by frame 100, you are drawing 100 arcs each tick, etc.

If you aren't trying to create an additive effect, simply clear the graphics before redrawing them:

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

Another way is to store the graphics command, and just modify it on tick. When the stage redraws, it will use the graphics updated values.

// 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;

If you are going for an additive effect (which I don't believe you are in this case) adding up the graphics each tick is still really expensive. You can instead cache the container the shape lives in, and then just add new graphics commands each tick, and update the cache. Check out the Cache Update demo, which can also be found in GitHub.

Upvotes: 1

Related Questions