Блог

Я начинающий программист, только начинающий приключение, и я ищу решения своей проблемы.

Я хотел бы воспроизвести фон при перемещении зеленого объекта и динамически отправить его красному объекту в fabric js. Я не совсем знаю, как это сделать.

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

Спасибо за любую помощь 🙂

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

var img = new fabric.Image('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQamp;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:ANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQamp;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();
  

Я действительно делал это однажды (вроде как). Я создал увеличитель, который скопировал то, что было «сфокусировано», на другое изображение. (к вашему сведению, моя исходная форма была квадратной)

Вот код, основанный на вашей скрипке, но он не будет работать как есть из-за проблем с CORS, но это должно дать вам лучшее начало

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

var img;
fabric.Image.fromURL('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQamp;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);
    }
    
});