我正在与 Fabricjs 合作构建一个工具,可以在图像上添加文本和形状。我还添加了缩放和平移控件。我在下面粘贴了用于缩放 mouse:wheel 事件的代码,但由于某种原因,该事件没有被检测到,并且不起作用。任何与我在这里做错的事情相关的帮助都是值得赞赏的。谢谢。
class FabricEditor {
constructor(image_name, image_url, id) {
this.id = id;
this.image_url = image_url;
this.image_name = image_name;
this.canvas = new window.fabric.Canvas('fabric-editor', { isDrawingMode: false });
// Enable panning
this.canvas.allowTouchScrolling = true;
this.canvas.selection = false;
let parent = this;
// Enable zooming
this.canvas.on('mouse:wheel', function (opt) {
console.log('Detecting mouse wheel', opt);
var delta = opt.e.deltaY;
var zoom = parent.canvas.getZoom();
zoom *= 0.999 ** delta;
// Set limits on zooming
if (zoom > 5) zoom = 5;
if (zoom < 1) zoom = 1;
parent.canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
});
}
}