问答

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

作者:admin 2021-05-06 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

###

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

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

image.png

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);
        }
});

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Canvas的 Fabric.js库如何让元素不超出

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

  • 微信扫码,用户点击登录之后,页面会重

    微信扫码,用户点击登录之后,页面会重

  • 用户登录要不要走网关

    用户登录要不要走网关

  • 如何使用Laravel中的asset方法绑定变量

    如何使用Laravel中的asset方法绑定变量

腾讯云代理商
海外云服务器