javascript - 动力学 JS : Fading in a fill image when applying it to a polygon shape?

Question

目前我正在尝试使用 Kinetic JS，示例如下:

http://jsfiddle.net/r8rtJ/4/

var yoda = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,
    width: 106,
    height: 118,
    scale: 2
});
poly.setFill({
image: imageObj,
offset: {x: 0, y: 0}
});

我想知道是否有办法在对象加载后淡入图像填充的不透明度？目前它只是立即应用于多边形，我似乎无法弄清楚如何独立于对象本身设置填充的不透明度。

干杯!

Answer 1

setFill 只是告诉多边形对象在绘制自身时应该填充什么。这可以是图像或颜色。

要设置绘制多边形的不透明度，您可以使用 opacity 属性。您可以通过将超时与增加多边形不透明度并重新绘制的函数相结合来完成您想要实现的目标。

var fadeIn = function(shape) {
    var o = shape.getOpacity();
    o = o + 0.1 >=1 ? 1 : o + 0.1;
    shape.setOpacity(o);
    shape.getLayer().draw();
    if(o !== 1) {
        setTimeout(function() {
                fadeIn(shape);
            }, 120);
    }
};

Example .

编辑:

目前在KinectJS中似乎没有办法设置填充的不透明度。不过，我一直在尝试看看是否可以找到解决方法。

正如您所提到的，一种方法是绘制另一个仅包含描边的多边形，并在带有填充的多边形上进行空填充，并在淡入完成后移除描边多边形。

Example .

另一种方法是更改​​特定多边形的 drawFunc。

每当调用特定层的draw 函数时，drawScene 和drawHit 函数都会为其所有子层调用。 Kinetic.Shape 的drawScene 和drawHit 函数调用对象的drawFunc。 drawScene 在调用 drawFunc 之前根据形状的不透明度设置 globalAlpha。

Kinetic.Polygon 的drawFunc 设置方式是，首先，在上下文中为多边形的边形成一条路径。然后它被填充，接着是描边。填充的方式是根据多边形的填充设置context的fillStyle，然后调用context.fill。

图片的填充样式是怎么设置的？当为多边形调用 setFill 并且作为参数传递的对象具有属性 image 时，fillType 被认为是 'PATTERN' 。当要填充 drawFunc 制作的路径时，使用图像和 context.createPattern 创建一个图案并将其设置为填充样式。从不考虑不透明度。

但是，我们可以通过将 drawFunc 更改为 setDrawFunc 来使特定多边形考虑填充的不透明度。我只是从 KinectJS 源代码复制了 drawFunc 并添加了一个条件，通过考虑使用 setFill 传递的不透明度来以不同方式填充图案。

Example .

请注意，尽管如此，由于某些原因，这会中断 mouseover 事件。最好坚持使用方法一，直到我或其他人弄清楚是什么导致 drawFunc 发生更改时 mouseover 不起作用。

编辑 2:

我设法弄明白了!

多边形的 drawHitFunc 与其 drawFunc 相同。因此，当我们更改 drawFunc 时，我们最终会更改 drawHitFunc，这会在需要命中检测时产生问题 - mouseover 就是这种情况事件。

因此，当我们更改多边形的 drawFunc 时，如果我们也将 drawHitFunc 更改为 setDrawHitFunc 以便它与原始 drawFunc，我们避免破坏命中检测。

Example .