我是一名新手程序员,刚刚开始冒险,正在寻找解决我问题的方法。
我想在移动绿色对象的同时重现背景并将其动态发送到 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();
最佳答案
我实际上做过一次(差不多)。我创建了一个放大镜,可以将“聚焦”的内容复制到另一幅图像上。 (我的源形状是正方形,仅供引用)
这是基于你的 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);
}
});
关于javascript - 在 fabric js 中动态重现背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63408766/