Question

使用fabricJS，我在初始化canevas时创建了一个对象（一个圆圈）和一个背景对象。

我的圈子将是＆＃34;绘图区域＆＃34;。

我希望如果鼠标在圆圈上方，用户可以绘制，如果鼠标在圆圈外，则用户无法进行绘制。

这是我的代码：

//create canevas

var canvas = new fabric.Canvas('canvas');

//create background

var imgElement = document.getElementById('img-background');

var imgInstance = new fabric.Image(imgElement, {
  left: 0,
  top:  0,
  angle: 0,
  opacity: 1,
  selectable:false
});

canvas.add(imgInstance);

//create drawing area

var drawingArea = new fabric.Circle({ 
  radius: 125, 
  fill: '#f55', 
  top: 75, 
  left: 75,
  selectable: false,
  perPixelTargetFind: true //important
});

canvas.add(drawingArea);

//check when the mouse is inside/outside the drawing area 

drawingArea.on('mouseover',function(e){
  console.log(e.target, 'In circle : I draw');
  canvas.isDrawingMode = true;
});

drawingArea.on('mouseout',function(e){
  console.log(e.target, "Out circle : I can't draw...");
  canvas.isDrawingMode = false;
});

和html

<!DOCTYPE html>

<html>
  <head></head>  
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <img id="img-background" src="img/background.png" style="display: none;"/>

    <script src="lib/fabric.js"></script>
    <script src="test-stack.js"></script>

  </body>
</html>

非常感谢。

FabricJS freeDrawing：如何在特定区域内绘制

0 个答案: