在Fabric.js中设置对象拖动限制 [英] Set object drag limit in Fabric.js

查看:1947
本文介绍了在Fabric.js中设置对象拖动限制的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是Fabric JS的新手,想要设置拖动限制

i am new in fabric js want to set the drag limit

我也尝试使用 https://github.com/kangax /fabric.js/wiki/事件处理

无法获得解决方案.

请检查附件中的图像,对象可以移动任何软件,但应仅在红色区域显示.我想要这个.帮帮我...谢谢!

please check the attached image, object can move anyware but it should be display in red area only.i want this. help me...thanks in advance !!

推荐答案

对我有用的是为object:moving事件创建事件侦听器.当移动发生时,您将更新toptop和goodleft变量,并且一旦超出范围就将对象重新定位到最后一个好点.

What had worked for me is to create an event listener for the object:moving event. When the move is happening you update the goodtop and goodleft variables and once you are out of bounds to reposition the object to the last good points.

var goodtop, goodleft, boundingObject;

canvas.on("object:moving", function(){
    var obj = this.relatedTarget;
    var bounds = boundingObject;
    obj.setCoords();
    if(!obj.isContainedWithinObject(bounds)){
        obj.setTop(goodtop);
        obj.setLeft(goodleft);
        canvas.refresh();    
    } else {
        goodtop = obj.top;
        goodleft = obj.left;
    }  
});

这篇关于在Fabric.js中设置对象拖动限制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆