如何解决如何在fabric.js中标记双头箭头的大小
首先感谢this answer,它解决了我绘制双箭头的需要。
但在此基础上,我还有另一个问题:
- 在绘制双头箭头之后如何添加
.as-console-wrapper { max-height: 100% !important; top: 0; }
来表示线的长度? - 如何使
Textbox
与行平行?这意味着需要计算角度值。 - 完成以上两点后,如何使用
Textbox
组合LineArrow
和Textbox
?
fabric.Group
// Extended fabric line class
fabric.LineArrow = fabric.util.createClass(fabric.Line,{
type: 'lineArrow',initialize: function(element,options) {
options || (options = {});
this.callSuper('initialize',element,options);
},toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'));
},_render: function(ctx) {
this.ctx = ctx;
this.callSuper('_render',ctx);
let p = this.calcLinePoints();
let xDiff = this.x2 - this.x1;
let yDiff = this.y2 - this.y1;
let angle = Math.atan2(yDiff,xDiff);
this.drawArrow(angle,p.x2,p.y2);
ctx.save();
xDiff = -this.x2 + this.x1;
yDiff = -this.y2 + this.y1;
angle = Math.atan2(yDiff,p.x1,p.y1);
},drawArrow: function(angle,xPos,yPos) {
this.ctx.save();
this.ctx.translate(xPos,yPos);
this.ctx.rotate(angle);
this.ctx.beginPath();
// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
this.ctx.moveTo(10,0);
this.ctx.lineTo(-15,15);
this.ctx.lineTo(-15,-15);
this.ctx.closePath();
this.ctx.fillStyle = this.stroke;
this.ctx.fill();
this.ctx.restore();
}
});
fabric.LineArrow.fromObject = function(object,callback) {
callback && callback(new fabric.LineArrow([object.x1,object.y1,object.x2,object.y2],object));
};
fabric.LineArrow.async = true;
var Arrow = (function() {
function Arrow(canvas) {
this.canvas = canvas;
this.className = 'Arrow';
this.isDrawing = false;
this.bindEvents();
}
Arrow.prototype.bindEvents = function() {
var inst = this;
inst.canvas.on('mouse:down',function(o) {
inst.onMouseDown(o);
});
inst.canvas.on('mouse:move',function(o) {
inst.onMouseMove(o);
});
inst.canvas.on('mouse:up',function(o) {
inst.onMouseUp(o);
});
inst.canvas.on('object:moving',function(o) {
inst.disable();
})
}
Arrow.prototype.onMouseUp = function(o) {
var inst = this;
// Calculate the length of the LineArrow
var a = this.line.x2 - this.line.x1
var b = this.line.y2 - this.line.y1
var lineLength = Math.floor(Math.sqrt(a * a + b * b));
if (lineLength === 0) {
inst.canvas.remove(this.line);
return;
}
var textBox = new fabric.Textbox(lineLength.toFixed(),{
hasBorders: true,hasControls: false,selectable: true,borderColor: 'red',fill: 'red',left: this.line.left,top: this.line.top
}).setCoords();
textBox.set('angle',this.line.angle / (Math.PI / 180));
inst.canvas.add(textBox).setActiveObject(textBox);
this.line.set({
dirty: true,objectCaching: true
});
inst.canvas.renderAll();
inst.disable();
};
Arrow.prototype.onMouseMove = function(o) {
var inst = this;
if (!inst.isEnable()) {
return;
}
var pointer = inst.canvas.getPointer(o.e);
var activeObj = inst.canvas.getActiveObject();
activeObj.set({
x2: pointer.x,y2: pointer.y
});
activeObj.setCoords();
inst.canvas.renderAll();
};
Arrow.prototype.onMouseDown = function(o) {
var inst = this;
inst.enable();
var pointer = inst.canvas.getPointer(o.e);
var points = [pointer.x,pointer.y,pointer.x,pointer.y];
this.line = new fabric.LineArrow(points,{
strokeWidth: 5,stroke: 'red',originX: 'center',originY: 'center',hasBorders: false,objectCaching: false,perPixelTargetFind: true
});
inst.canvas.add(this.line).setActiveObject(this.line);
};
Arrow.prototype.isEnable = function() {
return this.isDrawing;
}
Arrow.prototype.enable = function() {
this.isDrawing = true;
}
Arrow.prototype.disable = function() {
this.isDrawing = false;
}
return Arrow;
}());
var canvas = new fabric.Canvas('canvas',{
selection: false
});
var arrow = new Arrow(canvas);
上面是我修改的代码,实际上并不完美,希望有人可以帮助我。
谢谢。
解决方法
关于问题2,以下似乎在您的onMouseUp
函数中起作用:
var angle = Math.atan2(this.line.y2 - this.line.y1,this.line.x2 - this.line.x1);
textBox.set('angle',angle / (Math.PI / 180));
因此,基本上,我们计算箭头和x轴之间的atan并相应地旋转。
问题3-下面的问题似乎将其归为一组,请检查以下摘要是否有帮助(位于onMouseUp
的底部:
var group = new fabric.Group();
group.addWithUpdate(fabric.util.object.clone(this.line));
group.addWithUpdate(textBox);
inst.canvas.add(group).setActiveObject(group);
inst.canvas.remove(this.line);
inst.canvas.renderAll();
inst.disable();
注意函数内容的底部。
这是一个汇总代码段:
// Extended fabric line class
fabric.LineArrow = fabric.util.createClass(fabric.Line,{
type: 'lineArrow',initialize: function(element,options) {
options || (options = {});
this.callSuper('initialize',element,options);
},toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'));
},_render: function(ctx) {
this.ctx = ctx;
this.callSuper('_render',ctx);
let p = this.calcLinePoints();
let xDiff = this.x2 - this.x1;
let yDiff = this.y2 - this.y1;
let angle = Math.atan2(yDiff,xDiff);
this.drawArrow(angle,p.x2,p.y2);
ctx.save();
xDiff = -this.x2 + this.x1;
yDiff = -this.y2 + this.y1;
angle = Math.atan2(yDiff,p.x1,p.y1);
},drawArrow: function(angle,xPos,yPos) {
this.ctx.save();
this.ctx.translate(xPos,yPos);
this.ctx.rotate(angle);
this.ctx.beginPath();
// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
this.ctx.moveTo(10,0);
this.ctx.lineTo(-15,15);
this.ctx.lineTo(-15,-15);
this.ctx.closePath();
this.ctx.fillStyle = this.stroke;
this.ctx.fill();
this.ctx.restore();
}
});
fabric.LineArrow.fromObject = function(object,callback) {
callback && callback(new fabric.LineArrow([object.x1,object.y1,object.x2,object.y2],object));
};
fabric.LineArrow.async = true;
var Arrow = (function() {
function Arrow(canvas) {
this.canvas = canvas;
this.className = 'Arrow';
this.isDrawing = false;
this.bindEvents();
}
Arrow.prototype.bindEvents = function() {
var inst = this;
inst.canvas.on('mouse:down',function(o) {
inst.onMouseDown(o);
});
inst.canvas.on('mouse:move',function(o) {
inst.onMouseMove(o);
});
inst.canvas.on('mouse:up',function(o) {
inst.onMouseUp(o);
});
inst.canvas.on('object:moving',function(o) {
inst.disable();
})
}
Arrow.prototype.onMouseUp = function(o) {
var inst = this;
// Calculate the length of the LineArrow
var a = this.line.x2 - this.line.x1
var b = this.line.y2 - this.line.y1
var lineLength = Math.floor(Math.sqrt(a * a + b * b));
if (lineLength === 0) {
inst.canvas.remove(this.line);
return;
}
var textBox = new fabric.Textbox(lineLength.toFixed(),{
hasBorders: true,hasControls: false,selectable: true,borderColor: 'red',fill: 'red',left: this.line.left,top: this.line.top
}).setCoords();
var angle = Math.atan2(this.line.y2 - this.line.y1,this.line.x2 - this.line.x1);
textBox.set('angle',angle / (Math.PI / 180));
this.line.set({
dirty: true,objectCaching: true
});
var group = new fabric.Group();
group.addWithUpdate(fabric.util.object.clone(this.line));
group.addWithUpdate(textBox);
inst.canvas.add(group).setActiveObject(group);
inst.canvas.remove(this.line);
inst.canvas.renderAll();
inst.disable();
};
Arrow.prototype.onMouseMove = function(o) {
var inst = this;
if (!inst.isEnable()) {
return;
}
var pointer = inst.canvas.getPointer(o.e);
var activeObj = inst.canvas.getActiveObject();
activeObj.set({
x2: pointer.x,y2: pointer.y
});
activeObj.setCoords();
inst.canvas.renderAll();
};
Arrow.prototype.onMouseDown = function(o) {
var inst = this;
inst.enable();
var pointer = inst.canvas.getPointer(o.e);
var points = [pointer.x,pointer.y,pointer.x,pointer.y];
this.line = new fabric.LineArrow(points,{
strokeWidth: 5,stroke: 'red',originX: 'center',originY: 'center',hasBorders: false,objectCaching: false,perPixelTargetFind: true
});
inst.canvas.add(this.line).setActiveObject(this.line);
};
Arrow.prototype.isEnable = function() {
return this.isDrawing;
}
Arrow.prototype.enable = function() {
this.isDrawing = true;
}
Arrow.prototype.disable = function() {
this.isDrawing = false;
}
return Arrow;
}());
var canvas = new fabric.Canvas('canvas',{
selection: false
});
var arrow = new Arrow(canvas);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
Please draw arrow here
<div id="canvasContainer">
<canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas>
</div>
至于第1点-您所说的之后是什么意思,即在时间或空间上之后? :D
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。