javascript - 在 fabric js 中动态重现背景

Question

我是一名新手程序员，刚刚开始冒险，正在寻找解决我问题的方法。

我想在移动绿色对象的同时重现背景并将其动态发送到 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%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();

Answer 1

我实际上做过一次(差不多)。我创建了一个放大镜，可以将“聚焦”的内容复制到另一幅图像上。 (我的源形状是正方形，仅供引用)

这是基于你的 fiddle 的代码，但由于 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%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);
    }
    
});