标签：canvas fabricjs javascript

我正在使用fabricjs(1.7.20),并希望创建一种“出血区域”,在该区域中用户无法使用画布周围的一些空间；如果您愿意,可以使用一种“墙”来阻止对象移动到画布墙的侧面.我该怎么做？

var canvas = new fabric.Canvas("c");
canvas.setHeight(350);
canvas.setWidth(350);

canvas.add(new fabric.IText("Some text", {
  top: 25,
}));

var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 150, top: 150
});

canvas.add(circle, triangle);

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas id="c"></canvas>

这是向我建议的,这是我最近得到的.我正在寻找这样做,但是距画布的边界为10px.

canvas.on('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;
        }        
        obj.setCoords();        
        // top-left  corner
        if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
            obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
            obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
        }
        // bot-right corner
        if(obj.getBoundingRect().top+obj.getBoundingRect().height  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width  > obj.canvas.width){
            obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
            obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
        }
});

解决方法:

您可以通过以下方式添加一个10像素的出血区域：在确定对象是否从“出血”区域移出的条件下加上/减去10(我实际上更喜欢称其为“填充”),然后添加/从计算中减去将对象重新定位在填充边界内的位置.

这是一个有效的更新示例：

var padding = 10;
var canvas = new fabric.Canvas("c");

canvas.setHeight(350);
canvas.setWidth(350);

canvas.add(new fabric.IText("Some text", {
    top: 25,
}));

var circle = new fabric.Circle({
    radius: 20,
    fill: 'green',
    left: 100,
    top: 100
});
var triangle = new fabric.Triangle({
    width: 20,
    height: 30,
    fill: 'blue',
    left: 150,
    top: 150
});

canvas.add(circle, triangle);

canvas.on('object:moving', function(e) {
    var obj = e.target;
    
    // if object is too big ignore
    if (obj.currentHeight > obj.canvas.height - padding * 2 ||
        obj.currentWidth > obj.canvas.width - padding * 2) {
        return;
    }
    obj.setCoords();

    // top-left corner
    if (obj.getBoundingRect().top < padding ||
    	obj.getBoundingRect().left < padding) {
        obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + padding);
        obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + padding);
    }
    
    // bot-right corner
    if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height - padding || 
    	obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width - padding) {
        obj.top = Math.min(
        	obj.top,
        	obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - padding);
        obj.left = Math.min(
        	obj.left,
            obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - padding);
    }
});

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas id="c"></canvas>

在第一行中,我定义了一个变量“ padding”,它表示所需的填充大小.这样,如果您以后想要更改填充,则不必在八个不同的位置进行更改.

左上角条件中使用的padding变量代替0.

如果“左上”条件为true,则将填充添加到计算中以重新放置对象.

在“右下方”部分,我们做的是相反的–我们从条件中减去填充并从重新定位计算中减去.

您也可以尝试以下小提琴中的代码：https://jsfiddle.net/pahund/hz7jLnme/

标签：canvas,fabricjs,javascript
来源： https://codeday.me/bug/20191110/2014192.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。