如何将图像添加到织物画布?
Posted
技术标签:
【中文标题】如何将图像添加到织物画布?【英文标题】:How to add image to fabric canvas? 【发布时间】:2016-05-15 02:08:05 【问题描述】:我想在我的织物画布上添加图像/图标。 Fabric 演示中给出的代码不起作用。
fabric.Image.fromURL('my_image.png', function(oImg)
canvas.add(oImg);
);
这只会让我的整个画布空白。 我想添加图标作为响应事件的可点击元素。
【问题讨论】:
【参考方案1】:我已经完成了一个 jsfiddle,它在画布上加载 jpg 图像,通过使用 fabric.Image.fromURL() 函数和 'mouse:down' 事件。在 mouse:down 内部,我检查用户是单击对象还是仅单击画布。
这里是 javascript 的 sn-p:
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', 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);
canvas.add(img1);
);
canvas.on('mouse:down',function(event)
if(canvas.getActiveObject())
alert(event.target);
)
但如果我不使用额外变量,我的示例也可以:
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg)
canvas.add(myImg);
);
如果您需要更多的面料活动,可以在这里查看:http://fabricjs.com/events/
jsfiddle:https://jsfiddle.net/tornado1979/5nrmwtxu/
希望有帮助,祝你好运。
【讨论】:
【参考方案2】:此代码运行正常,但您需要使用 fabric.js 文件。 您还需要在标题中使用 fabric.js CDN 文件。
Fabric.js CDN->
var canvas = new fabric.Canvas('drawarea');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement,
left: 100,
top: 100,
angle: 0,
opacity: 0.75,
width:300,
height:300
);
canvas.add(imgInstance);
#my-imagedisplay:none;
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id="drawarea" style="border: 1px solid red;float: right"> </canvas>
<img src="https://via.placeholder.com/300.png" id="my-image" >
【讨论】:
以上是关于如何将图像添加到织物画布?的主要内容,如果未能解决你的问题,请参考以下文章
我们如何在 php 中使用织物 Js 对画布上的图像执行相同的操作(缩放和旋转)?