CODEWITHSUNDEEP
javascripthtmlcanvassvgfabricjs
ats
ats

Reputation: 13

Fabric.js multiple clipping based on svg

I have canvas with svg path on it. I want to do something like this: http://jsfiddle.net/tbqrn/

var canvas = new fabric.Canvas('c');

var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(10,10,150,150);
ctx.rect(180,10,200,200);
ctx.closePath();
ctx.stroke();
ctx.clip();

fabric.Image.fromURL(img01URL, function(oImg) {
oImg.scale(.25);
oImg.left = 50;
oImg.top = 100;
canvas.add(oImg);
canvas.renderAll();
});

fabric.Image.fromURL(img02URL, function(oImg) {
oImg.scale(.25);
oImg.left = 300;
oImg.top = 100;
canvas.add(oImg);
canvas.renderAll();
});

but with one difference: the image after leaving one area should immediately appear in another one. How can I do it?

Upvotes: 1

Views: 831

Answers (1)

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10153

This is not doable with a single canvas. The only way I can think of that works is this: Have two canvases with two different images and "synchronize" the position of the image between them. You actually have to use two images.

HTML:

<canvas id="c1" width="200" height="400"></canvas>
<canvas id="c2" width="200" height="400"></canvas>

CSS:

#c1, #c2 {
    border: 1px solid #ccc;
}

#c2 {
   margin-left: 20px; 
}

.canvas-container {
    float: left;
}

JS:

var offsetLeft = 220; // #c1 width + #c2 margin-left

var canvas1 = new fabric.Canvas('c1');
var canvas2 = new fabric.Canvas('c2');

var c1Img, c2Img;

fabric.Image.fromURL(img01URL, function(oImg) {
    c1Img = oImg;

    c1Img.scale(.25);
    c1Img.left = 0;
    c1Img.top = 0;
    c1Img.hasControls = false;
    c1Img.hasRotatingPoint = false;
    canvas1.add(c1Img);
    canvas1.renderAll();
});

fabric.Image.fromURL(img01URL, function(oImg) {
    c2Img = oImg;

    c2Img.scale(.25);
    c2Img.left = -offsetLeft;
    c2Img.top = 0;
    c2Img.hasControls = false;
    c2Img.hasRotatingPoint = false;
    canvas2.add(c2Img);
    canvas2.renderAll();
});


canvas1.on('object:moving', function(e) { 
    c2Img.set({left: e.target.left -offsetLeft, top: e.target.top});
    c2Img.setCoords();
    canvas2.renderAll();
                                       });

canvas2.on('object:moving', function(e) { 
    c1Img.set({left: e.target.left + offsetLeft, top: e.target.top});
    c1Img.setCoords();
    canvas1.renderAll();
                                       });

Test it here: http://jsfiddle.net/se9sw1d8/2/

Upvotes: 1

Related Questions