我正在寻找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
我真的不知道您想要实现什么,但是出于性能和复杂性的原因,使用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] 删除。
我来说两句