CODEWITHSUNDEEP
htmlkineticjs
vDeepak
vDeepak

Reputation: 103

Clipping mask effect for images using KineticJS

I want the Clipping mask effect for images in HTML5. Please find my If I use

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

instead of

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

it works fine with creating stage object as- var stage = new Kinetic.Stage("container", 800, 800);

how to implement this feature with v4.4.1.min.js?

Thanks.

Upvotes: 2

Views: 3120

Answers (2)

Eric Rowell
Eric Rowell

Reputation: 5219

You can set clipping masks with the setClipFunc method:

http://kineticjs.com/docs/Kinetic.Container.html (see clip)

you can use this for any container, including the stage, layers, or groups. Everything inside the clipping mask will be visible, and everything outside of the clipping mask will be invisible

Upvotes: 0

markE
markE

Reputation: 105035

There are several ways to do clipping in KineticJS

You can use a fill pattern inside one of the predefined shapes like this:

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

And you can create a custom shape that uses html canvas’s 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
        });

Here is code and a Fiddle: 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>

Upvotes: 4

Related Questions