使用KineticJS在鼠标悬停时重新塑造形状

Question

我有一个帆布,可容纳中等到大量的形状(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',因此,不知道它当前有一个形状.

我想知道一些事情:

1. 关于Canvas的上述事实是否适用于Kinetic的图层元素？
2. 看起来我需要清除diagramImage的上下文并使用不同的颜色重绘 - 这会导致鼠标悬停闪烁吗？
3. 在我当前的形状下面绘制另一种颜色的形状是否有益？然后我可以将形状隐藏在顶部 - 也许通过修改z指数 - 看似"改变"形状的颜色？
4. 如果3为真,那么将500个元素加倍到1000会有任何性能问题吗？

Answer 1

这是一个实验室,展示了如何使用鼠标悬停更改形状的颜色:

http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/