Question

我希望HTML5中的图像具有剪贴蒙版效果。请找我的如果我使用

http://www.html5canvastutorials.com/libraries/kinetic-v3.8.3.js

而不是

http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js

它可以正常创建舞台对象 - var stage = new Kinetic.Stage（“container”，800,800）;

如何使用v4.4.1.min.js实现此功能？

感谢。

Answer 1

在KineticJS中有几种方法可以进行剪裁

您可以在其中一个预定义形状中使用填充图案，如下所示：

        var clipWithFill = new Kinetic.Circle({
          …
          fillPatternImage: img,
          fillPatternOffset: [-160, 90],
          …
        });

您可以创建一个使用html canvas的clip（）;

的自定义形状

        var clipWithCustomShape = new Kinetic.Shape({
          drawFunc: function(canvas) {
            var context = canvas.getContext();
            context.save();
            context.beginPath();

            // draw our clipping shape
            Context.rect(100,100,100,150);
            // set it as the context's clipping region
            context.clip();
            // draw the image which will be clipped
            context.drawImage(img,50,75);
            // restore the context to it’s unclipped state
            context.restore();
          },
          stroke: 'black',
          strokeWidth: 5
        });

这是代码和小提琴：http://jsfiddle.net/m1erickson/MWSx9/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body { margin: 0px; padding: 0px; }
      canvas{border:1px solid red;}
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
    <script defer="defer">

        function drawClips(img) {

            var stage = new Kinetic.Stage({
                container: 'container',
                width: 400,
                height: 300
            });
            var layer = new Kinetic.Layer();

            var clipWithFill = new Kinetic.Circle({
                x: 100,
                y: 100,
                radius: 75,
                fillPatternImage: img,
                fillPatternOffset: [30, 90],
                fillPatternRepeat: "no-repeat",
                stroke: 'black',
                strokeWidth: 5,
                draggable: true
            });
            layer.add(clipWithFill);


            var clipWithCustomShape = new Kinetic.Shape({
                drawFunc: function (canvas) {
                    var context = canvas.getContext();
                    context.save();
                    context.beginPath();

                    // draw our custom clipping shape
                    drawOurCustomShape(context)
                    // set it as the context's clipping region
                    context.clip();
                    // draw the image which will be clipped
                    context.drawImage(img, 200, 75);
                    //
                    context.restore();
                    // re-draw our custom shape
                    // just to outline our clipped region
                    drawOurCustomShape(context);
                    canvas.fillStroke(this);
                },
                stroke: 'black',
                strokeWidth: 5,
                draggable: true
            });
            layer.add(clipWithCustomShape);


            function drawOurCustomShape(context) {
                context.moveTo(200, 150);
                context.bezierCurveTo(250, 170, 300, 20, 390, 100);
                context.lineTo(350, 220);
                context.lineTo(250, 220);
                context.closePath();
            }

            stage.add(layer);
        }


        function houseToPNG() {
            var tempCanvas = document.createElement("canvas");
            var tempCtx = tempCanvas.getContext("2d");
            tempCanvas.width = 140;
            tempCanvas.height = 140;
            drawHouse(tempCtx);
            var img = new Image();
            img.onload = function () {
                tempCanvas = null;
                drawClips(img);
            }
            img.src = tempCanvas.toDataURL();
        }

        function drawHouse(ctx) {
            ctx.save();
            // roof
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.strokeStyle = "gray";
            ctx.lineWidth = 4;
            ctx.moveTo(5, 40);
            ctx.lineTo(135, 40);
            ctx.lineTo(70, 4);
            ctx.closePath()
            ctx.fill();
            ctx.stroke();
            // frame
            ctx.beginPath();
            ctx.fillStyle = "blue";
            ctx.strokeStyle = "gray";
            ctx.lineWidth = 4;
            ctx.rect(20, 40, 100, 100);
            ctx.fill();
            ctx.stroke();
            // windows
            ctx.beginPath();
            ctx.fillStyle = "lightgray";
            ctx.strokeStyle = "orange";
            ctx.lineWidth = 3;
            ctx.rect(40, 55, 20, 25);
            ctx.rect(80, 55, 20, 25);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.strokeStyle = "tan"
            ctx.moveTo(42, 68);
            ctx.lineTo(58, 68);
            ctx.moveTo(82, 68);
            ctx.lineTo(98, 68);
            ctx.moveTo(50, 57);
            ctx.lineTo(50, 78);
            ctx.moveTo(90, 57);
            ctx.lineTo(90, 78);
            ctx.stroke();
            // door
            ctx.beginPath();
            ctx.fillStyle = "purple";
            ctx.strokeStyle = "orange";
            ctx.lineWidth = 3;
            ctx.rect(60, 95, 20, 40);
            ctx.rect(73, 115, 1, 1);
            ctx.fill();
            ctx.stroke();
            //
            ctx.restore();
        }

        houseToPNG();

    </script>
  </body>
</html>

Answer 2

您可以使用setClipFunc方法设置剪贴蒙版：

http://kineticjs.com/docs/Kinetic.Container.html（见剪辑）

您可以将此用于任何容器，包括舞台，图层或组。剪贴蒙版内的所有内容都是可见的，剪贴蒙版外的所有内容都将不可见

使用KineticJS剪切图像效果

2 个答案: