2

我现在正在玩 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}
});

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

干杯!

4

2 回答 2

3

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);
    }
};

例子。

编辑：

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

正如您所提到的，一种方法是绘制另一个仅具有笔划的多边形，并在具有填充的多边形上空填充，并在淡入完成后删除笔划多边形。

例子。

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

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

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

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

但是，我们可以通过改变它来让一个特定的多边形考虑填充的不drawFunc透明度setDrawFunc。我只是drawFunc从 KinectJS 源中复制了setFill.

例子。

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

编辑 2：

我设法弄清楚了！

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

因此，当我们更改drawFunc多边形的 时，如果我们也更改drawHitFuncwithsetDrawHitFunc以使其与原始 drawFunc相同，我们可以避免破坏命中检测。

例子。

于 2013-01-03T10:25:51.010 回答
1

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

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

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

于 2013-01-09T03:41:44.087 回答