我为这段代码制作了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.:抱歉英语不好或错误.
向画布添加一行时,通常可以选择.但是,由于您修改了自己的属性,如宽度和高度,这些属性来自2个点,因此其宽度和高度会发生变化.
如果以编程方式更改维度,则必须line.setCoords()明确调用,否则不会再次计算交互点.
perPixelTargetFind是可选的,每次进入选择模式时都不需要调用它.
所以答案是:
在mouseup事件中调用line.setCoords().
检查代码段.
<!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>我认为在您创建该行的代码中，您可以将其更改为下面的内容，以便您可以在单击该行时选择该行
试试这个jsfiddle
if(mode=="draw"){
line = new fabric.Line(points, {
strokeWidth: 5,
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center',
selectable: true,
targetFindTolerance: true
}
| 归档时间： |
|
| 查看次数： |
4343 次 |
| 最近记录： |