小编Ank*_*shi的帖子

阻止Fabric js对象缩小画布边界

我一直试图在边界内保持一个对象(在画布上用布料js构建).它是在移动和旋转它时实现的.为了达到这个目的,在画布边界限制内Move对象获取了帮助.但是当我开始缩放对象时,它只是继续走出边界.我不明白必须做什么才能将它保持在边界内,即使在缩放时也是如此.请帮我一个代码来防止这种行为.如果您也可以附加演示,那就太棒了.

    <html>
<head>
    <title>Basic usage</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>

</head>
<body>
<canvas id="canvas" style= "border: 1px solid black" height= 480 width = 360></canvas>
<script>
 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;
        } …
Run Code Online (Sandbox Code Playgroud)

javascript html5-canvas fabricjs

3
推荐指数
3
解决办法
6404
查看次数

标签 统计

fabricjs ×1

html5-canvas ×1

javascript ×1