动态JS:将填充图像应用于多边形形状时，使其褪色

Kinetic JS: Fading in a fill image when applying it to a polygon shape?

本文关键字：褪色 多边形 JS 填充 应用于 图像 动态      更新时间：2023-09-26

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

我想知道是否有一种方法来褪色的图像填充的不透明度一旦对象加载?目前，它只适用于多边形瞬间，我似乎不能弄清楚如何设置不透明度的填充独立于对象本身。

干杯!

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。

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

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

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

。

注意，由于某种原因，这会破坏mouseover事件。最好坚持方法一，直到我或其他人弄清楚drawFunc更改时mouseover无法工作的原因。

编辑2 :

我设法弄明白了!

多边形的drawHitFunc与其drawFunc相同。所以当我们改变drawFunc时，我们最终改变了drawHitFunc，这在需要命中检测时产生了问题-就像mouseover事件的情况一样。

所以，当我们为一个多边形改变drawFunc时，如果我们也用setDrawHitFunc改变drawHitFunc，使其与原始的 drawFunc相同，我们就避免了破坏命中检测。

。

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

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

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

相关文章：