[英]KineticJS shape opacity
I need some assistance changing the opacity of a shape using KineticJS (5.0.0.). 我需要一些帮助,使用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 ).
只要将形状悬停,形状就会变得可见(不透明度1.0),而将其保留时就变得不可见(不透明度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 ). 关键是,我无法重绘整个图层,因为这需要花费很多时间(〜300个形状)。 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 ) jsFiddle: http : //jsfiddle.net/p39uH/2/ (请参见HTML的第25和30行)
var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 });
var stage = new Kinetic.Stage({container:'container',width:578,height:200}); var layer = new Kinetic.Layer();
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/ ) (代码基于此: 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. 即使我将形状的不透明度设置为0.0,但仍可以看到。 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 ? 有没有办法在不绘制整个舞台和/或图层的情况下(重新)绘制不透明度为0.0的形状?
Thanks in advance. 提前致谢。
Yes, a quick look indicates node.draw() might be broken in 5.0.1. 是的,快速浏览表明node.draw()在5.0.1中可能已损坏。
Workarounds: 解决方法:
Drop back to version 4.4.0 放回版本4.4.0
Use layer.drawScene() which saves redraw time by not redrawing the hit-canvas. 使用layer.drawScene()可以通过不重绘命中画布来节省重绘时间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.