html - EaselJS 在鼠标悬停时更改颜色

Question

在 HTML canvas 元素中顽固地实现了所有与鼠标和矢量相关的信息之后，我切换到了 EaselJS。

我已经习惯了 EaselJS，它真的很简洁。我特别喜欢容器以及它们使绘制嵌入形状变得多么简单。但是，我无法弄清楚你是如何实现 shape 的颜色变化的。鼠标悬停。任何像矩形从红色变为绿色这样简单的东西。

我是否应该从其容器中移除该形状并创建一个具有新颜色的新形状？

更复杂的是，如果一个形状部分遮挡另一个形状，比方说圆圈内有一个正方形，那么在正方形上方时 onMouseOver 将不会注册圆圈。有什么办法解决这个问题。

干杯

编辑:这是我用来绘制圆圈的矢量示例

    var circle=new Shape();
    circle.graphics.beginStroke("rgba(255,0,0,0.75)")
            .setStrokeStyle(lw)
            .drawCircle(w/2,h/2,r)
            .endStroke()
            .beginFill("rgba(255,255,0,0.5)")
            .drawCircle(w/2,h/2,r-lw/2)
            .endFill();
    circle.shadow=new Shadow("rgba(0,0,0,0.5)",10,-10,10)

有没有一种简单的方法可以将新颜色传递给 beginFill？我可以在那里使用变量吗？ circle.graphics... 只执行一次，还是每次调用 stage.update() 时执行？

Answer 1

您想在鼠标悬停时将 Shape.graphics.beginFill 更改为不同的颜色。

Here's an example (警告:草率的代码!)