Question

我现在正在玩Kinetic JS，下面是一个例子：

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函数。 drawScene的{{1}}和drawHit函数调用对象的Kinetic.Shape。在调用drawFunc之前，drawScene会根据形状的不透明度设置globalAlpha。

设置drawFunc drawFunc的方式是，首先，在多边形边的上下文中形成路径。然后它被填充，然后是中风。完成填充的方法只是根据多边形的填充设置上下文的Kinetic.Polygon，然后调用fillStyle。

填充样式如何设置图像？当为多边形调用context.fill并且作为参数传递的对象具有属性setFill时，image被视为fillType。当要填充'PATTERN'创建的路径时，将使用图像和drawFunc创建模式并将其设置为填充样式。从不考虑不透明度。

但是，我们可以通过使用context.createPattern更改其drawFunc来使特定多边形考虑填充的不透明度。我只是复制了KinectJS源中的setDrawFunc并添加了一个条件，通过考虑drawFunc传递的不透明度来不同地填充模式。

<强> Example

但请注意，由于某种原因，这会导致setFill事件中断。最好坚持方法一，直到我或其他人为止，找出mouseover在mouseover发生变化时不起作用的原因。

编辑2 ：

我设法搞清楚了！

多边形的drawFunc与其drawHitFunc相同。因此，当我们更改drawFunc时，我们最终会更改drawFunc，这会在需要点击检测时产生问题 - 就像drawHitFunc事件一样。

因此，当我们更改多边形的mouseover时，如果我们还将drawFunc更改为drawHitFunc，那么它与原始相同setDrawHitFunc，我们避免打破命中检测。

<强> Example

Answer 2

是的，有办法做到这一点。使用transitionTo方法淡化形状不透明度，如下所示：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

如果你想要应用一个笔划，一直保持不透明，你可以简单地创建另一个形状，只有一个笔划位于填充图像的形状的顶部

Kinetic JS：将填充图像应用于多边形时淡入填充图像？

2 个答案: