Reproduce dynamically background in fabric js

user_14103730 0
Viewed 105

I am a novice programmer and just starting out on an adventure and am looking for solutions to my problem.

I would like to reproduce the background while moving the green object and send it dynamically to the red object in fabric js. I don't know totally how to go about it.

JSFiddle: https://jsfiddle.net/8h2akjog

enter image description here

Thank you for any help :)

var canvas = new fabric.Canvas('can');
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);
var link = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU';

var img = new fabric.Image('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU', {
     left: 1,
     top: 1,
     lockMovementX: true,
     lockMovementY: true,
     selectable: false,
     hasBorders: false
});
canvas.add(img);

fabric.Image.fromURL('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU', function(myImg) {
 canvas.add(myImg);
 canvas.sendToBack(myImg)
});


[{"x":52,"y":283},{"x":52,"y":283},{"x":342,"y":283},{"x":342,"y":283},{"x":342,"y":183},{"x":152,"y":183}]

var polygon = new fabric.Polygon([ 
        { x: 52, y: 283 }, 
        { x: 52, y: 283 }, 
        { x: 342, y: 283}, 
        { x: 342, y: 283}, 
        { x: 342, y: 183 },
        { x: 152, y: 183 }], { 
        fill: 'rgba(0,0,0,0)',
        stroke: 'green'
});

var polygon2 = new fabric.Polygon([ 
        { x: 102, y: 333 }, 
        { x: 102, y: 333 }, 
        { x: 392, y: 333}, 
        { x: 392, y: 333}, 
        { x: 392, y: 233 },
        { x: 202, y: 233 }], { 
        fill: 'rgba(0,0,0,0)',
        stroke: 'red'
});
canvas.add(polygon, polygon2);

canvas.renderAll();
fabricjs javascript
1 Answers

I actually did this once (sorta). I created a magnifier that copied what was "focused" onto another image. (my source shape was square, fyi)

Here's code based your fiddle, but it's not going to work as-is because of CORS issues, but it should give you a better start

var canvas = new fabric.Canvas('can');
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);
var link = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU';

var img;
fabric.Image.fromURL('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU', function(myImg) {
 canvas.add(myImg);
 canvas.sendToBack(myImg);
 img = myImg;
});


[{"x":52,"y":283},{"x":52,"y":283},{"x":342,"y":283},{"x":342,"y":283},{"x":342,"y":183},{"x":152,"y":183}]

var polygon = new fabric.Polygon([ 
        { x: 52, y: 283 }, 
        { x: 52, y: 283 }, 
        { x: 342, y: 283}, 
        { x: 342, y: 283}, 
        { x: 342, y: 183 },
        { x: 152, y: 183 }], { 
        fill: 'rgba(0,0,0,0)',
        stroke: 'green'
});

var polygon2 = new fabric.Polygon([ 
        { x: 102, y: 333 }, 
        { x: 102, y: 333 }, 
        { x: 392, y: 333}, 
        { x: 392, y: 333}, 
        { x: 392, y: 233 },
        { x: 202, y: 233 }], { 
        fill: 'rgba(0,0,0,0)',
        stroke: 'red'
});
canvas.add(polygon, polygon2);

canvas.renderAll();

canvas.on('mouse:move', function (obj) {
    console.log({
        x: polygon.aCoords.tl.x,
      y: polygon.aCoords.tl.y,
    });
    try {
      var squareImage = canvas.toDataURL({
        format: "png",
        left: polygon.left,
        top: polygon.top,
        width: polygon.width,
        height: polygon.height,
        multiplier: 1
      });

      fabric.Image.fromURL(squareImage, function(img) {
        img.set({
            clipPath: new fabric.Polygon([ 
              { x: 52, y: 283 }, 
              { x: 52, y: 283 }, 
              { x: 342, y: 283}, 
              { x: 342, y: 283}, 
              { x: 342, y: 183 },
              { x: 152, y: 183 }])
        });
        
        //do what you want with the img
        
      });

      
    } catch (e) {
        console.log(e);
    }
    
});
user_94202220
Related