Fabric.js drawImage替代
用户名
我正在寻找lib的drawImage()替代方案fabric.js，所以我做了一个function：
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
return new fabric.Image(img, {
left: x,
top: y,
width: width,
height: height,
id: "rhino",
clipTo: function (ctx) {
ctx.rect(sx,sy,swidth,sheight);
}
});
}
var imgElement = new Image();
imgElement.onload = function() {
var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
canvas.add(imgInstance);
};
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
结果需要为：
但是我的自定义功能一无所获。问题出在哪儿？
Codepen： http ：//codepen.io/anon/pen/RaxRqZ
安德里亚·博加齐（Andrea Bogazzi）
我真的不知道您想要实现什么，但是出于性能和复杂性的原因，使用clipTo不是我的建议。在临时画布上绘制所需图像的一部分，然后使用此临时画布作为fabricJS图像的源。
var canvas = new fabric.Canvas('c');
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
var tmpc = document.createElement('canvas');
tmpc.width = swidth;
tmpc.height = sheight;
ctx = tmpc.getContext("2d");
ctx.drawImage(img,-sx,-sy);
return new fabric.Image(tmpc, {
left: x,
top: y,
width: width,
height: height,
id: "rhino"
});
}
var imgElement = new Image();
imgElement.onload = function() {
var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
canvas.add(imgInstance);
};
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500", height="500"></canvas>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何设置Fabric.js？
- 2
Fabric.js的几何形状
- 3
Fabric.js定义图像的范围/限制
- 4
Undo-Redo feature in Fabric.js
- 5
在Fabric.js中全屏显示画布
- 6
Fabric.js-重建和商业使用
- 7
改善Fabric.js性能
- 8
Which object was modified in fabric.js
- 9
Fabric.js计数对象
- 10
fabric.js中的圆形控制旋钮
- 11
在fabric.js中编写乳胶配方
- 12
Fabric.js支持的文本更改事件
- 13
缩放fabric.js画布对象
- 14
Fabric JS：如何防止扩展活动组
- 15
动态更新fabric.js路径点
- 16
图像数据fabric.js
- 17
Fabric JS父子对象
- 18
如何激活Fabric js IText的光标？
- 19
Fabric.js动态添加/删除元素
- 20
动画时Fabric JS动画速度变化
- 21
Fabric.js画布图像抗锯齿
- 22
Fabric.js drawImage替代
- 23
对象数据随机更改Fabric.js
- 24
图像数据fabric.js
- 25
开源橡皮擦工具的替代橡皮擦工具（Fabric js）
- 26
右键单击pan fabric js
- 27
Fabric JS中的BringForward
- 28
Fabric JS 对象缩放
- 29
画布旋转 - Fabric js
我来说两句