相关疑难解决方法(0)

在画布边界限制内移动对象

我试图限制画布内的移动物体,但我在顶部和左侧移动具有限制区域的物体时遇到一些困难,当我缩放具有大尺寸的物体时,我也无法限制移动物体画布的左侧和顶侧

canvas.observe("object:moving", function(e){
      var obj = e.target;
         // if object is too big ignore
        if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
            return;
        }

        var halfw = obj.currentWidth/2;
        var halfh = obj.currentHeight/2;
        var bounds = {tl: {x: halfw, y:halfh},
            br: {x: obj.canvas.width-halfw, y: obj.canvas.height-halfh}
        };

        // top-left  corner
        if(obj.top < bounds.tl.y || obj.left < bounds.tl.x){
            obj.top = Math.max(obj.top, bounds.tl.y);
            obj.left = Math.max(obj.left, bounds.tl.x )
        }


        // bot-right corner
        if(obj.top > bounds.br.y || obj.left > bounds.br.x){
            obj.top = Math.min(obj.top, bounds.br.y);
            obj.left = …
Run Code Online (Sandbox Code Playgroud)

fabricjs

25
推荐指数
3
解决办法
2万
查看次数

标签 统计

fabricjs ×1