Kineticjs定制形状剪裁/遮蔽图像＆amp;动画剪裁区域

Question

我使用动力学功能创建了一个图像＆amp;使用clip:属性进行掩蔽，但我只能在这里使用矩形形状（不允许自定义形状）。

所以我创建了一个自定义形状，并使用fillPatternImage:属性将图像放置在形状内，然后我想要为它设置动画，但是如果我移动形状图像位置则会随之移动。

我想要实现的目标：我希望图片能够保持原样。动画剪裁区域以在静止图像上冲浪。

的 DEMO

CODE：

HTML：

<div id="canvas"></div>
<div class="animate">Animate this</div>

CSS：

#canvas {
    width: 600px;
    height: 600px;
}
.animate {
    cursor: pointer;
}

JS：

$(function () {
    stage = new Kinetic.Stage({
        container: 'canvas',
        width: 600,
        height: 600
    });

    var layer = new Kinetic.Layer();

    // Image
    imageObj = new Image();
    imageObj.src = 'https://avatars3.githubusercontent.com/u/1498774?s=460';

    // Mask
    poly = new Kinetic.Line({
        points: [0, 0, 100, 50, 200, 150, 50, 200],
        fillPatternImage: imageObj,
        stroke: 'black',
        strokeWidth: 0,
        name: 'poly',
        closed: true,
    });

    layer.add(poly);
    stage.add(layer);

    i = 0;
    valueX = 1;
    animationLoop();

    $(".animate").click(function () {
        i = 0;
        animationLoop();
    });
});


function animationLoop() {
    if (i < 50) {
        setTimeout(function () {
            animateThis();
        }, 100);
    }
}

function animateThis() {
    poly.setX(valueX);
    valueX += 1;
    i += 1;
    stage.draw();
    animationLoop();
}

stage.draw();

Answer 1

好这是一种完全不同的方法。

请记住：Kinetic JS只使用标准的Canvas（HTML5）'clip'方法，没有什么特别之处，请查看源代码。所以，知道这一点，并且知道Canvas可以剪裁成任何形状，应该可以将Kinetic画布图像剪切成任何形状，对吗？

在这个方法中，我们使用标准的Canvas Clipping技能（你想要的任何形状）并将它们覆盖在Kinetic对象上。

工作演示：http://jsfiddle.net/JSdc2/ky4Uj/1/

我还在学习Kinetic，但这就是我的所作所为：

 img.onload = function () {

        var customImage = new Kinetic.Image({
            x: 50,
            y: 50,
            image: img,
            draggable: true
        });

        ctx.save();

        // Create a shape, whatever you like --
        ctx.beginPath();
        ctx.moveTo(10, 10);
        ctx.lineTo(100, 30);
        ctx.lineTo(180, 10);
        ctx.lineTo(200, 60);
        ctx.lineTo(180, 70, 120, 0, 10);
        ctx.lineTo(200, 180);
        ctx.lineTo(100, 150);
        ctx.lineTo(70, 180);
        ctx.lineTo(20, 130);
        ctx.lineTo(50, 70);
        ctx.closePath();

        // Clip everything below here
        ctx.clip();

        layer.add(customImage);
        layer.draw();
        ctx.clip();

    }

    // Specify the src to load the image
    img.src = "https://avatars3.githubusercontent.com/u/1498774?s=460";

这是你要找的答案吗？

Answer 2

<强> DEMO

可以做的是：只需将图像向相反方向移动，即可感觉到只有形状在移动且图像仍然存在。

fillPatternOffset属性可用于执行此操作。

代码：（HTML和CSS相同）

JS：

$(function(){
stage = new Kinetic.Stage({
    container: 'canvas',
    width: 600,
    height: 600
});

var layer = new Kinetic.Layer();

// Image
imageObj = new Image();
imageObj.src = 'https://avatars3.githubusercontent.com/u/1498774?s=460';

// Mask
poly = new Kinetic.Line({
    points: [0, 0, 100, 50, 200, 150, 50, 200],
    fillPatternImage: imageObj,
    stroke: 'black',
    strokeWidth: 0,
    fillPatternOffset: [10,10],
    name: 'poly',
    closed: true,
});

layer.add(poly);
stage.add(layer);

i = 0;
valueX = 1; 
animationLoop();

    $(".animate").click(function(){
        i = 0;
        animationLoop();
    });
});


function animationLoop(){
    if(i<50){
        setTimeout(function(){
          animateThis();
        }, 100);
    }
}
function animateThis(){
    poly.fillPatternOffsetX(valueX);
    poly.fillPatternOffsetY(valueX);
    poly.setX(valueX);
    poly.setY(valueX);
    valueX += 1;
    i += 1;
    stage.draw();
    animationLoop();
}

stage.draw();

Answer 3

是的，裁剪路径可以设置动画。

我认为这是你正在寻找的正确效果。

工作演示：http://jsfiddle.net/JSdc2/Hca7f/

您可以使用FillPatternOffset

   function animateThis() {
        poly.setX(valueX);
        poly.fillPatternOffsetX(valueX);
        valueX += 1;
        i += 1;
        stage.draw();
        animationLoop();
    }