Dev*_*vin 5 javascript image fabricjs
我是 JavaScript 新手，正在使用 Fabric.js 使用此代码，只需单击按钮即可创建多个图像。我从另一篇文章中找到了以下允许形状的代码，但我似乎不知道如何成功制作这些图像。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="fabric.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var canvas = new fabric.Canvas('c');
$("#addCircle").click(function(){
canvas.add(new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
}));
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="editor">
<input type="button" id="addCircle" value="Add Circle"></div>
<canvas id="c" width="300" height="300"></canvas>
</div>
</body>
</html>
您可以轻松添加已上传到网址的任何图像，如下所示：
这是js片段：
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';
canvas.renderAll();
var myImg = 'http://www.logowik.com/uploads/images/511_android.jpg';
$('#addImage').on('click',addImg);
function addImg(){
fabric.Image.fromURL(myImg, function(oImg) {
var l = Math.random() * (500 - 0) + 0;
var t = Math.random() * (500 - 0) + 0;
oImg.scale(0.2);
oImg.set({'left':l});
oImg.set({'top':t});
canvas.add(oImg);
});
}
在这里您可以在 jsfiddle 上找到一个实例：http://jsfiddle.net/tornado1979/1awwv3eh/1/ 按下按钮并在随机位置导入图像。
希望有帮助，祝你好运。