fabric.js直线，然后单击选择 [英] fabric.js straight line and select on click
问题描述
我为此代码设置了3种模式:
I made 3 modes for this code:
- 选择行
- 画线和
- 删除行.
它似乎正在工作.但是我想改变两件事. 例如，每次我选择一条线时，我只需要单击它即可.
It looks like it is working. But I want to change 2 things. For example that every time when I select a line i just need to click it.
您能告诉我如何改善代码吗?
Can you tell me how i can improve my code ?
谢谢您的回答.
这是我的代码:
<!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.: Sorry for bad english or mistakes.
推荐答案
在画布上添加一行时，通常是可选的. 但是，由于您修改了它自己的属性(例如从2个点派生的宽度和高度)，因此其宽度和高度都发生了变化.
When adding a line to canvas it is normally selectable. But since you modified it's own properties like width and height that derives from the 2 points, its widht and height are changed.
如果您以编程方式更改尺寸，则必须明确调用line.setCoords()，否则将不会再次计算交互点.
If you change dimensions programmatically you have to call line.setCoords() explicitly otherwise the interaction points are not calculated again.
perPixelTargetFind是可选的，不需要在每次进入选择模式时都调用.
perPixelTargetFind is optional and does not need to be called every time you go on selection mode.
所以答案是:
在mouseup事件中调用line.setCoords().
call line.setCoords() in your mouseup event.
检查代码段.
<!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>
这篇关于fabric.js直线，然后单击选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
