Canvas的 Fabric.js库如何让元素不超出画布

如题，想让画布内的东西不超过画布，看遍了fabric所有的demo都没有类似解决方案…求大神告知
或者，谁能告知如何监听画布内的东西…求助

回答

监听 canvas.on('object:moving', function (e) {}) 判断

文章：http://www.360doc.com/content...
里面的例子可以看下。预览打不开的话可以把代码复制下来运行
https://jsfiddle.net/3v0cLaLk/

Canvas的 Fabric.js库如何让元素不超出画布

var canvas = new fabric.Canvas('canvas');
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
  canvas.item(0).set({
    borderColor: 'gray',
    cornerColor: 'black',
    cornerSize: 12,
    transparentCorners: true
  });
  canvas.setActiveObject(canvas.item(0));
  canvas.renderAll();
  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);
        }
});

以上是 Canvas的 Fabric.js库如何让元素不超出画布 的全部内容， 来源链接： utcz.com/a/109463.html

回到顶部