javascript - 如何限制Fabricjs中自由绘制圆？

Question

我正在使用 Fabricjs，我必须允许用户在图像上自由绘制某些区域。

现在是fiddle包含能够在整个 Canvas 上绘制的代码。我希望它仅限于在图像内绘制。

代码如下:`

var canvas = new fabric.Canvas("canvas2");
var circle, isDown, origX, origY;
fabric.Image.fromURL('http://www.beatnyama.com/wp-content/uploads/2015/05/assets.jpg', function(img){
img.evented=false;
img.selectable=false;
canvas.add(img);
minX = img.oCoords.tl.x;
maxX = img.oCoords.br.x;
minY = img.oCoords.tl.y;
maxY = img.oCoords.br.y;
canvas.sendToBack(img);
canvas.on('mouse:down', function(o){
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
    left: origX,
    top: origY,
    originX: 'left',
    originY: 'top',
    radius: pointer.x-origX,
    angle: 0,
    fill: '',
    stroke:'red',
    strokeWidth:3,
});
canvas.add(circle);
});

canvas.on('mouse:move', function(o){
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
var radius = Math.max(Math.abs(origY - pointer.y),Math.abs(origX - pointer.x))/2;
if (radius > circle.strokeWidth) {
    radius -= circle.strokeWidth/2;
}
circle.set({ radius: radius});

if(origX>pointer.x){
    circle.set({originX: 'right' });
} else {
    circle.set({originX: 'left' });
}
if(origY>pointer.y){
    circle.set({originY: 'bottom'  });
} else {
    circle.set({originY: 'top'  });
}
canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});
  });

`

Answer 1

调整您之前问题的逻辑，相互之间，您应该尝试以下操作:

  var canvas = new fabric.Canvas('canvas');
  var minX, minY, maxX, maxY;
  var circle, isDown, origX, origY, lastGoodRadius;
  fabric.Image.fromURL('http://www.beatnyama.com/wp-content/uploads/2015/05/assets.jpg', function(img){
  img.evented=false;
  img.selectable=false;
  canvas.add(img);
  minX = img.oCoords.tl.x;
  maxX = img.oCoords.br.x;
  minY = img.oCoords.tl.y;
  maxY = img.oCoords.br.y;
  canvas.sendToBack(img);
  });

canvas.on('mouse:down', function(o){
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
    left: origX,
    top: origY,
    originX: 'left',
    originY: 'top',
    radius: pointer.x-origX,
    angle: 0,
    fill: '',
    stroke:'red',
    strokeWidth:3,
});
  lastGoodRadius = 0;
canvas.add(circle);
});

canvas.on('mouse:move', function(o){
    if (!isDown) return;
    var restore = false;
    var pointer = canvas.getPointer(o.e);
    var radius = Math.max(Math.abs(origY - pointer.y),Math.abs(origX - pointer.x))/2;
    if (radius > circle.strokeWidth) {
        radius -= circle.strokeWidth/2;
    }
    
    var diam = radius * 2;
    if(origX>pointer.x){
        circle.set({originX: 'right' });
        if (origX - diam < minX) {
          restore = (origX-minX)/2;
        }
    } else {
        circle.set({originX: 'left' });
        if (origX + diam > maxX) {
          restore = (maxX-origX)/2;
        }
    }
    if(origY>pointer.y){
        circle.set({originY: 'bottom'  });
        if (origY - diam < minY) {
          restore = (origY-minY)/2;
        }
    } else {
        circle.set({originY: 'top'  });
        if (origY + diam > maxY) {
          restore = (maxY-origY)/2;
        }
    }
  if(!restore) {
    circle.set({ radius: radius});
  } else {
    circle.set({ radius: restore});
    }
    canvas.renderAll();
});

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id='canvas' width="550" height="550" style="border:#000 1px solid;"></canvas>