如何解决在结构内自由绘制.Image.fromURL
我正在尝试在 FabricJS 库上自由绘制。
但是我需要限制用户在先前加载的 fabric.image 上的自由绘制。
使用 fabric.Text 进行测试以在画布上添加文本，我有一个名为 globalCompositeOperation 的文本属性，该属性设置为源代码有效，文本只能显示在先前加载的fabric.Image内部。但是我不能免费抽奖。
我尝试在 canvas.freeDrawingBrush 上使用 globalCompositeOperation ，但是不起作用。
你能帮我吗？
非常感谢！
您可以在此处查看问题：https://www.irealworks.com/miniworks/fabricjs/
单击开/关，可以在瓶子外面绘制。我想画瓶内极限。
这就是代码：
<body>
<script src="jquery-3.5.1.min.js"></script>
<script src="fabricjs.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript"></script>
<button id="btnAddText" >Add Text</button>
<button id="btnDraw" >Draw on / off</button>
<button id="btnImg" >To image</button>
<br clear="all" />
<br clear="all" />
<img id="backgroundHide" src="background.png" style="display:none">
<img id="bottleHide" src="botella.png" style="display:none">
<div id="bottleBackground" style="border:1px solid; background-image:url('background.png'); position:relative; background-size: contain; background-repeat:no-repeat; float:left;">
<canvas id="canvasBottle"></canvas>
</div>
<script>
var drawing = false;
$(function(){
let canvasWidth = 500,canvasHeight = 500;
$('#canvasBottle').css({
width: canvasWidth,height: canvasHeight
});
var canvas = new fabric.Canvas('canvasBottle',{
width: $("#canvasBottle").width(),height: $("#canvasBottle").height()
});
$('#btnImg').click(function(){
html2canvas(document.getElementById('bottleBackground')).then(function(canvas2) {
console.log(canvas2.toDataURL("png"));
});
});
$("#btnAddText").click(function () {
var text = new fabric.Text("Testing",{
fontSize: 50,fill: "green",top: 100,left: 100
});
canvas.add(text);
text.globalCompositeOperation = 'source-atop';
canvas.renderAll();
});
$('#btnDraw').click(function(){
canvas.isDrawingMode = !canvas.isDrawingMode;
});
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
canvas.freeDrawingBrush.color = '#000';
canvas.freeDrawingBrush.width = 10;
canvas.freeDrawingBrush.globalCompositeOperation = 'source-atop'; /* Not Work! */
var background;
fabric.Image.fromURL('botella.png',function (objects,options) {
background = objects;
let percentTopBottle = 15.9354,percentLeftBottle = 29.6129,borderCanvas = 2,backgroundRealWidth = $('#backgroundHide').width(),backgroundRealHeight = $('#backgroundHide').height(),bottleRealWidth = $('#bottleHide').width(),bottleRealHeight = $('#bottleHide').height(),bottleWMax = canvas.width * (((bottleRealWidth * 100) / backgroundRealWidth) / 100),bottleHMax = canvas.height * (((bottleRealHeight * 100) / backgroundRealHeight) / 100),scaleX = bottleWMax / background.width,scaleY = bottleHMax / background.height,topBottle = ((backgroundRealWidth * (percentTopBottle / 100)) * scaleX) - borderCanvas,leftBottle = ((backgroundRealHeight * (percentLeftBottle / 100)) * scaleY) - borderCanvas;
background.set({
top: topBottle,left: leftBottle,scaleX: scaleX,scaleY: scaleY,selectable: false,id: 'main'
});
canvas.add(background);
canvas.renderAll();
});
});
</script>
</body>
</html>```
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
