JavaScript - 动态创建SVG并修改游标 [英] JavaScript - Dynamically create SVG and modify for cursor

问题描述

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

  var canvas = new fabric.Canvas（c，{
 isDrawingMode：true ，
 freeDrawingCursor：'url（img / cursor.svg），auto'
}）; 
  

解决方案

我认为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.ey  -  mousecursor.radius; mousecursor.left = obj.ex  -  mousecursor.radius; canvas.renderAll（）}）canvas .on（'mouse：out'，function（obj）{//将圆圈放在屏幕上mousecursor.top = -100; mousecursor.left = -100; canvas.renderAll（）}） 

< pre class =snippet-code-css lang-css prettyprint-override> canvas {border：1px solid #ccc;}

 < script src =https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric .js>< / script>< canvas id =cwidth =600height =600>< / canvas>  

Say I have a HTML5 canvas (In this case using fabric.js), and I want to change the cursor over the canvas to represent whatever brush size and colour has been selected. I'm thinking there should be a way to do this by changing an SVG's properties (size & colour) dynamically with JS so we don't have to use multiple images. Any ideas on if this is possible?

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

解决方案

I think freeDrawingCursor is just looking for normal css property names. Here is an example of how to have a fabric object represent the cursor size and color:

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>

这篇关于JavaScript - 动态创建SVG并修改游标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！