使用 KineticJS 在鼠标悬停时重新着色形状

Posted 2023-03-05

【中文标题】使用 KineticJS 在鼠标悬停时重新着色形状

【英文标题】：Recoloring a shape on mouseover using KineticJS

【发布时间】：2012-03-05 10:04:22

【问题描述】：

我有一个画布，可以容纳中等到大量的形状 (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 的事实是否适用于 Kinetic 的图层元素？ 看来我需要清除 diagramImage 的上下文并使用不同的颜色重新绘制 -- 这会导致鼠标悬停时闪烁吗？ 在我当前的形状“下方”绘制另一种颜色的形状是否有益？然后我可以隐藏顶部的形状（也许通过修改 z-index）来看似“改变”形状的颜色吗？ 如果 3 为真，那么将 500 个元素加倍至 1000 个元素是否存在性能问题？

【参考方案1】：

这是一个展示如何通过鼠标悬停更改形状颜色的实验室：

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

【讨论】：

只是让您知道，这非常有帮助。一个好问题和一个好答案。正是我想要的。

我怎样才能添加相同的行为，但通过鼠标单击选定的形状并保持颜色直到我选择不同的形状？是否有像“IsSelected”这样的属性？谢谢

cornel - 有很多方法可以做到这一点。您可以设置自定义形状，例如 shape.setAttr('selected', true);如果你愿意。或者您可以检查形状颜色以确定它是否使用 shape.getFill()