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

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

javascript canvas html5-canvas

Javascript FabricJS freeDrawing：如何在特定区域内绘制,javascript,canvas,html5-canvas,fabricjs,Javascript,Canvas,Html5 Canvas,Fabricjs,在初始化canevas时，我使用fabricJS创建了一个对象（一个圆）和一个倒圆对象我的圆圈将是“绘图区域” 我想，如果鼠标在圆上，用户可以画画，如果鼠标在圆外，用户不能画画这是我的密码： //create canevas var canvas = new fabric.Canvas('canvas'); //create background var imgElement = document.getElementById('img-background'); var imgIn

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

我的圆圈将是“绘图区域”

我想，如果鼠标在圆上，用户可以画画，如果鼠标在圆外，用户不能画画

这是我的密码：

//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>

非常感谢