Question

我是fabric.js的新手，但我正在快速学习。

我有一些项目，点击后，将填充红色。

我的问题在于再次单击图像以仅将图像重置为默认值（黑色）。

有人可以解释如何实现这一目标吗？

canvas.on('mouse:down', function(e) {
e.target.setFill('red');
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;

canvas.deactivateAll().renderAll();
});

请参阅JSFIDDLE以获取完整的示例代码

Answer 1

查看下面的if语句。它检测当前颜色并切换它：

(function(){
var canvas = new fabric.Canvas('c4');
canvas.hoverCursor = 'default';

canvas.on('mouse:down', function(e) {

    var color = e.target.fill;
    if(color == '#000')
    {
        e.target.setFill('red');
    } else {
        e.target.setFill('#000');
    }
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;


canvas.deactivateAll().renderAll();
  });

canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 200 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 150 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 100 }));


})();

Answer 2

看看这个小提琴：http://jsfiddle.net/hpyrk05w/3/ 它很简单：如果对象的当前填充是什么，你必须检查鼠标是什么？如果当前填充为红色而不是用黑色填充，如果没有，则填充红色

(function(){
var canvas = new fabric.Canvas('c4');
canvas.hoverCursor = 'default';
    
canvas.on('mouse:down', function(e) {
    if(e.target.getFill()=="red")
        e.target.setFill('black');
    else
        e.target.setFill('red');
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;

canvas.deactivateAll().renderAll();
  });
  	
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 200 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 150 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 100 }));
  
 
})();

pre { margin-left: 15px !important }
canvas{border: 1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c4" width="450" height="500"></canvas>

在渲染初始事件后取消选择鼠标事件'mouse：down'

2 个答案: