我有一个帆布,可容纳中等到大量的形状(50-500).
我成功地使用这些工具绘制了我想要的形状轮廓:
function Drawpolygon(diagramLayer,polygon) { var diagramImage = new Kinetic.Shape(function () { var context = this.getContext(); context.beginPath(); context.linewidth = 1; context.strokeStyle = "#ff0000"; var lastVertice = polygon.Vertices[polygon.Vertices.length - 1]; context.moveto(lastVertice.X,lastVertice.Y); for (var i = 0; i < polygon.Vertices.length; i++) { var vertice = polygon.Vertices[i]; context.lineto(vertice.X,vertice.Y); } context.stroke(); context.closePath(); }); diagramImage.on("mouSEOver",function () { }); diagramLayer.add(diagramImage); planViewStage.add(diagramLayer); }
我想在mouSEOver上将diagramImage的context的strokeStyle更改为不同的颜色.据我所知,canvas元素没有跟踪’state’,因此,不知道它当前有一个形状.
我想知道一些事情:
>关于Canvas的上述事实是否适用于Kinetic的图层元素?
>似乎我需要清除diagramImage的上下文并使用不同的颜色重绘 – 这会导致鼠标悬停闪烁吗?
>在我目前的形状下面绘制另一种颜色的形状是否有益?然后我可以将形状隐藏在顶部 – 也许通过修改z指数 – 看似“改变”形状的颜色?
>如果3为真,那么将500个元素加倍到1000会有任何性能问题吗?
解决方法
这是一个实验室,展示了如何使用鼠标悬停更改形状的颜色:
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/