我现在正在玩 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}
});
我想知道是否有办法在对象加载后淡入图像填充的不透明度？目前它只是立即应用于多边形，我似乎无法弄清楚如何独立于对象本身设置填充的不透明度。
干杯！
【问题讨论】：
标签： javascript canvas html5-canvas kineticjs
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 函数。用于Kinetic.Shape 的drawScene 和drawHit 函数调用对象的drawFunc。 drawScene 在调用drawFunc 之前根据形状的不透明度设置globalAlpha。
Kinetic.Polygon 的drawFunc 设置方式是，首先，在多边形边的上下文中形成路径。然后它被填充，然后是描边。填充的方式就是简单的根据多边形的填充设置上下文的fillStyle，然后调用context.fill。
图像的填充样式是如何设置的？当为多边形调用setFill 并且作为参数传递的对象具有属性image 时，fillType 被认为是'PATTERN'。当要填充drawFunc创建的路径时，使用图像和context.createPattern创建一个图案并设置为填充样式。从不考虑不透明度。
但是，我们可以通过将其drawFunc 更改为setDrawFunc 来使特定多边形考虑填充的不透明度。我只是从 KinectJS 源中复制了drawFunc，并添加了一个条件来通过考虑setFill 传递的不透明度来以不同方式填充模式。
请注意，尽管如此，这会因某种原因中断mouseover 事件。最好坚持方法一，直到我或其他人弄清楚是什么导致 mouseover 在 drawFunc 更改时不起作用。
编辑 2：
我想通了！
多边形的drawHitFunc 与其drawFunc 相同。因此，当我们更改drawFunc 时，我们最终会更改drawHitFunc，这会在需要进行命中检测时产生问题——就像mouseover 事件一样。
因此，当我们为多边形更改drawFunc 时，如果我们也将drawHitFunc 更改为setDrawHitFunc 使其与原始 drawFunc 相同，我们避免打破命中检测。
【讨论】：
是的，有办法做到这一点。使用 transitionTo 方法来淡化形状不透明度，如下所示：
如果您想应用一个始终不透明的笔触，您可以简单地创建另一个形状，该笔触仅位于填充有图像的形状的顶部
【讨论】：