fabric.js 直线并点击选择答案

【问题标题】：fabric.js straight line and select on clickfabric.js 直线并点击选择
【发布时间】：2016-05-03 04:48:29
【问题描述】：

我为这段代码做了 3 种模式：

选择线
画线和
删除行。

看起来它正在工作。但我想改变两件事。例如，每次我选择一行时，我只需要点击它。

你能告诉我如何改进我的代码吗？

感谢您的回答。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
 <script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
 <script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<button id="select">Selection mode</button>
<button id="draw">Drawing mode</button>

<button id="delete">Delete selected object(s)</button><br />
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

<script type="text/javascript">
var line, isDown,mode;

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

$("#select").click(function(){
    mode="select";   
         canvas.selection=true;
     canvas.perPixelTargetFind = true;
     canvas.targetFindTolerance = 4;
     canvas.renderAll();
});
$("#draw").click(function(){
    
     
    mode="draw";
});
$("#delete").click(function(){
    
    
    deleteObjects();
});

// Adding objects to the canvas...

 
canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
   
  if(mode=="draw"){
    line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center',

  });
  canvas.add(line);}
});
 
canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  
  if(mode=="draw"){
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll(); }
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

  

// select all objects
function deleteObjects(){
    var activeObject = canvas.getActiveObject(),
    activeGroup = canvas.getActiveGroup();
    if (activeObject) {
        if (confirm('Are you sure?')) {
            canvas.remove(activeObject);
        }
    }
    else if (activeGroup) {
        if (confirm('Are you sure?')) {
            var objectsInGroup = activeGroup.getObjects();
            canvas.discardActiveGroup();
            objectsInGroup.forEach(function(object) {
            canvas.remove(object);
            });
        }
    }
}
</script>
</body>
</html>

Ps.: 抱歉英语不好或有错误。

【问题讨论】：

标签： fabricjs

【解决方案1】：

在画布上添加线条时，它通常是可选的。但是由于您修改了它自己的属性，例如从 2 点派生的宽度和高度，因此它的宽度和高度也发生了变化。

如果您以编程方式更改尺寸，则必须显式调用line.setCoords()，否则不会再次计算交互点。

perPixelTargetFind 是可选的，不需要在每次进入选择模式时调用。

所以答案是：

在 mouseup 事件中调用 line.setCoords()。

检查sn-p。

<!DOCTYPE html>
<html>
<head>
 <script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
 <script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<button id="select">Selection mode</button>
<button id="draw">Drawing mode</button>

<button id="delete">Delete selected object(s)</button><br />
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

<script type="text/javascript">
var line, isDown,mode;

var canvas = new fabric.Canvas('c');
     canvas.perPixelTargetFind = true;
     canvas.targetFindTolerance = 4;

$("#select").click(function(){
    mode="select";   
    canvas.selection=true;
    canvas.renderAll();
});
$("#draw").click(function(){
    
     
    mode="draw";
});
$("#delete").click(function(){
    
    
    deleteObjects();
});

// Adding objects to the canvas...

 
canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
   
  if(mode=="draw"){
    line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center',

  });
  canvas.add(line);}
});
 
canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  
  if(mode=="draw"){
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll(); }
});

canvas.on('mouse:up', function(o){
  isDown = false;
  line.setCoords();
});

  

// select all objects
function deleteObjects(){
    var activeObject = canvas.getActiveObject(),
    activeGroup = canvas.getActiveGroup();
    if (activeObject) {
        if (confirm('Are you sure?')) {
            canvas.remove(activeObject);
        }
    }
    else if (activeGroup) {
        if (confirm('Are you sure?')) {
            var objectsInGroup = activeGroup.getObjects();
            canvas.discardActiveGroup();
            objectsInGroup.forEach(function(object) {
            canvas.remove(object);
            });
        }
    }
}
</script>
</body>
</html>

【讨论】：

【解决方案2】：

我认为在您创建该行的代码中，您可以将其更改为下面，以便您可以在单击时选择该行

试试这个jsfiddle

  if(mode=="draw"){
line = new fabric.Line(points, {
strokeWidth: 5,
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center',
selectable: true,
targetFindTolerance: true
}

【讨论】：