KineticJS shape opacity

Question

I need some assistance changing the opacity of a shape using KineticJS (5.0.0.). In an mouse event, I want to change the opacity of the shape, which triggered the event. Whenever the shape is hovered, it gets visible ( opacity 1.0 ) and when it's left, it becomes invisible ( opacity 0.0 ). It works fine, whenever I redraw the whole Layer of the specified shape.

The point is, I can't redraw the whole Layer because it takes to much time ( ~300 shapes ). For that reason I changed some code, to just draw the shape.

jsFiddle: http://jsfiddle.net/p39uH/2/ ( see lines 25 and 30 of HTML )

var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer();

  var pentagon = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 5,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    opacity: 0.1
  });

  pentagon.on('mouseover', function() {
    this.opacity(0.3);
    this.draw(); // instead of layer.draw();
  });

  pentagon.on('mouseout', function() {
    this.opacity(0.0);
    this.draw(); // instead of layer.draw();
  });
  // add the shape to the layer
  layer.add(pentagon);

  // add the layer to the stage
  stage.add(layer);

( Code is based on this: http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-alpha-with-kineticjs/ )

Even though I set the opacity of the shape to 0.0 when left, it's still visible as you can see. Every time it is hovered, it becomes more and more visible ( I guess the shape gets redrawn ).

Is there any way to (re)draw the shape with an opacity of 0.0 WITHOUT drawing the whole stage and/or layer ?

Thanks in advance.

Answer 1

Yes, a quick look indicates node.draw() might be broken in 5.0.1.

Workarounds:

• Drop back to version 4.4.0

• Use layer.drawScene() which saves redraw time by not redrawing the hit-canvas.