【发布时间】：2021-02-01 09:17:45
【问题描述】：
我使用 fabricjs 库。 我在画布上添加了一张图片 - 但对于某些用户而言，并非所有图像区域都是可选的。 当我在单独的文件中编写此代码时，它可以完美运行， 但是当我将代码插入网站时 - 对于某些用户而言，并非所有图像区域都是可选的， 所有右侧都不起作用： 当用户单击图像的右侧并拖动图像时，图像不会移动 - 图像不会移动，等等。
可能是什么原因？
这是我的代码：
<svg width="600px" height="350px"><rect width="600" height="350" class="bg"/>
<foreignObject x="10" y="10" width="330" height="330">
<body marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; width: 330px; height: 330px; border: 1px solid lightgray;">
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000"></canvas>
</body>
</foreignObject>
<text x="10" y="20" fill="white">SVG with embedded Canvas</text>
<text x="0" y="0" fill="white">Data extent</text>
</svg>
<script>
fabric.Object.prototype.selectionColor ='rgba(255,119,0,0.3)';
fabric.Object.prototype.cornerSize = 20;
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = '#eee';
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
fabric.Image.fromURL(
'https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png',
function(myImg) {
//i create an extra var for to change some image properties
var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150});
img1.resizeFilter = new fabric.Image.filters.Resize({
resizeType: 'hermite'
});
canvas.add(img1);
});
</script>
有什么想法吗？ 提前致谢
【问题讨论】：
标签： fabricjs