[英]Wrong position after center object using fabric js canvas
I have an image on a canvas using FabricJS, after I load the image I call canvas.centerObject(img). 加载图像后,我使用FabricJS在画布上有图像,我将其称为canvas.centerObject(img)。 I have the same image scaled 2X, I am trying to imaplement a Magnify Glass functionality, everything works fine without centering the image, but as soon as I call canvas.centerObject(img) the bigger image doesn't show in the rigth position. 我有相同的图像缩放比例为2倍,我正在尝试实现Magnify Glass功能,在不使图像居中的情况下一切正常,但是一旦我调用canvas.centerObject(img),较大的图像就不会显示在正确的位置。
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
img1 = img;
img.set({
width: originalWidth,
height: originalHeight,
evented: true,
selectable: false
});
lens = fabric.util.object.clone(img);
lens.set({
width: scale * originalWidth,
height: scale * originalHeight,
clipTo: function (ctx) {
ctx.arc(-this.left + x - this.width / 2, -this.top + y - this.height / 2, radius, 0, Math.PI * 2, true);
}
});
canvas.add(img, lens);
canvas.centerObject(img);//*******issue here****
});
canvas.on('mouse:move', function (e) {
x = e.e.layerX;
y = e.e.layerY;
lens.set('left', -(scale - 1) * x);
lens.set('top', -(scale - 1) * y);
canvas.renderAll();
});
Please check on this fiddle 请检查这个小提琴
Thanks. 谢谢。
I re-aligned the bigger image so it shows correctly when you call canvas.centerObject(img)
. 我重新对齐了较大的图像,以便在调用canvas.centerObject(img)
时可以正确显示。 However, you might like to rethink your design a little to perhaps incorporate object scaling, scale()
- depending on your implementation needs, of course. 但是,您可能需要重新考虑您的设计,也许可以合并对象缩放, scale()
-当然,这取决于您的实现需求。
Here's an updated JSFiddle and the tweaked code: 这是更新的JSFiddle和经过调整的代码:
https://jsfiddle.net/rekrah/rfdxff5h/ https://jsfiddle.net/rekrah/rfdxff5h/
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
img1 = img;
img.set({
width: originalWidth,
height: originalHeight,
evented: true,
selectable: false
});
lens = fabric.util.object.clone(img);
lens.set({
top: -225,
left: 150,
width: scale * originalWidth,
height: scale * originalHeight,
clipTo: function(ctx) {
ctx.arc(-this.left + x - this.width / 2, -this.top + y - this.height / 2, radius, 0, Math.PI * 2, true);
}
});
canvas.add(img, lens);
canvas.centerObject(img);//******* issue no longer here****
});
canvas.on('mouse:move', function(e) {
x = e.e.layerX;
y = e.e.layerY;
if (x > 150 && x < 750) {
lens.set('left', -(scale - 1) * x + 300);
lens.set('top', -(scale - 1) * y);
}
canvas.renderAll();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.