鼠标:画布的滚轮事件在fabricjs中不起作用

问题描述 投票:0回答:0

我正在与 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();
        });
    }
}
javascript css reactjs html5-canvas fabricjs
© www.soinside.com 2019 - 2024. All rights reserved.