JavaScript - 动态创建 SVG 并为光标修改

Question

假设我有一个 HTML5 Canvas (在本例中使用 fabric.js)，我想更改 Canvas 上的光标以表示已选择的任何画笔大小和颜色。我认为应该有一种方法可以通过使用 JS 动态更改 SVG 的属性(大小和颜色)来做到这一点，这样我们就不必使用多个图像。关于这是否可能的任何想法？

var canvas = new fabric.Canvas(c, {
            isDrawingMode: true,
            freeDrawingCursor: 'url("img/cursor.svg"), auto'
});

Answer 1

我认为 freeDrawingCursor 只是在寻找普通的 css 属性名称。下面是一个如何让 fabric 对象表示光标大小和颜色的示例:

var canvas = new fabric.Canvas('c', {
  isDrawingMode: true,
  freeDrawingCursor: 'none'
});

canvas.freeDrawingBrush.width = 10;
canvas.freeDrawingBrush.color = '#9f9';

var mousecursor = new fabric.Circle({ 
  left: 0, 
  top: 0, 
  radius: canvas.freeDrawingBrush.width / 2, 
  fill: canvas.freeDrawingBrush.color, 
  originX: 'right', 
  originY: 'bottom',
})

canvas.add(mousecursor);

canvas.on('mouse:move', function(obj) {
  mousecursor.top = obj.e.y - mousecursor.radius;
  mousecursor.left = obj.e.x - mousecursor.radius;
  canvas.renderAll()
})

canvas.on('mouse:out', function(obj) {
  // put circle off screen
  mousecursor.top = -100;
  mousecursor.left = -100;
  canvas.renderAll()
})

canvas {
    border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>

<canvas id="c" width="600" height="600"></canvas>