- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是fabric.js的新手,并且对浏览器canvas API没有太多经验,因此,我感谢有人会提供的所有帮助。
要实现的目标是用3种不同的模式用鼠标箭头绘制:
_render: function(ctx) {
this.callSuper('_render', ctx);
// do not render if width/height are zeros or object is not visible
if (this.width === 0 || this.height === 0 || !this.visible) return;
ctx.save();
var xDiff = this.x2 - this.x1;
var yDiff = this.y2 - this.y1;
var angle = Math.atan2(yDiff, xDiff);
ctx.translate(xDiff / 2, yDiff / 2);
ctx.rotate(angle);
ctx.beginPath();
//move 10px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
ctx.moveTo(10, 0);
ctx.lineTo(-20, 15);
ctx.lineTo(-20, -15);
ctx.closePath();
ctx.fillStyle = this.stroke;
ctx.fill();
ctx.restore();
}
<--->
最佳答案
将上下文平移到直线的两个端点,然后旋转以绘制箭头。
DEMO
// 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, xDiff);
this.drawArrow(angle, 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;
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,
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center',
hasBorders: false,
hasControls: 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>
关于fabricjs - 在fabric.js中绘制两个箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53114152/
我需要向现有对象属性集引入一些其他属性。 喜欢: ID 地理位置 等 每当我绘制形状时,都需要向该形状添加其他属性,并且需要从toDataLessJSON()获取 最佳答案 从1.7.0版开始,lev
有什么方法可以防止在缩放对象组时发生翻转? 我尝试了“lockScalingFlip”属性。但它仅在缩放单个对象时受支持。 最佳答案 在版本 1.4.11 中,设置 lockScalingFlip=t
我正在使用 fabric js。今天我遇到了这个问题“如何检查 fabricjs 文本是多行的?”。请帮我解决这个问题。提前致谢。 最佳答案 fabricjs 文本有一个 _textLines 属性。
clipTo 函数自 2.0 起已被弃用,是否有任何替代品或该功能刚刚被删除? 最佳答案 他们仍在努力(Clipping API) https://github.com/fabricjs/fabric
如果使用clone()方法克隆fabric.Path对象,则路径对象不会重复。我在这里看到了这个问题 https://github.com/kangax/fabric.js/issues/330但Fa
我正在尝试将文本显式设置为文本框,在较旧的 fabricjs 版本中 object.setText("something") 在fabric js版本2中工作但不工作。这个版本中引入了其他任何方式吗?
我有一个 fabricjs Canvas ,我需要输入 PDF,类似于加载图像的方式。我希望在加载到 Canvas 上之前我需要通过 PDFjs 将 PDF 转换为 PNG 吗? docume
我可以上传背景图片。但我不知道如何拉伸(stretch)才能覆盖整个 Canvas 。示例代码 var fr = new FileReader; fr.onload = function() {
我正在尝试在 FabricJs Canvas 内绘制按钮的网格/数组(p*p)。我能够创建所需的网格/数组。 但我无法在相同高度和宽度的 block 内绘制/放置按钮。 HTML: Create
我有一个 fabricjs Canvas ,上面有一个可以打开和关闭绘图的按钮。如何将自定义控件应用于我绘制的任何/所有绘制对象;例如,我想选择我画的任何一条线,并且只能旋转它们。我已阅读 the e
我想在移动/调整大小/缩放/拖动时将对象的不透明度设置为 0.5。 我们确实为所有这些事件处理程序提供了事件处理程序,但是当其中任何一个启动时,它们只会被触发一次。我想在事件完成后使对象不透明度=1。
我正在使用 fabric js 来调整对象大小,我希望用户在最小和最大限制内调整对象大小。如何使用fabric js做到这一点。 我尝试过类似的属性 lockScalingX,lockScalingY
我已在 SVG 对象和 SVG 对象内的路径上设置自定义属性。 我添加到 Canvas 的每个对象也被分配了一个“id”属性,以及我用来与应用程序中的对象交互的其他一些属性。 到目前为止,当我克隆这些
如何在fabricjs中获取对象标识符? 例如 var text = new fabric.IText('hello world', { left: mouse1X, top: mouse1Y });
Fabric.js 2.3.6 我正在尝试将对象剪辑到使用自由绘图灌木绘制的路径上。代码无法在路径内显示图像,我不确定我做错了什么。 可以剪裁多个对象,因此我无法将路径应用于 Canvas 本身。 l
有没有办法只在 Canvas 对象的一侧给笔画?例如,我只想为顶部提供笔划。 当我申请时"strokeWidth:1" ,它适用于所有方面。我还没有找到任何属性或方法来解决我的问题。 最佳答案 对于已
我正在使用 Fabric.js 在 Canvas 上绘制一些矩形。默认行为是在矩形内单击以选择它。如何更改行为,使其仅在单击矩形边框时才被选中? 单击矩形内部而不是边框应该什么都不做。 您可以通过
据我所知,当使用角控件调整对象的大小时,无论用户将鼠标移到何处,高度和宽度都会按比例更改,以保持对象的长宽比。我的客户希望用户在使用角控件时能够独立于宽高比调整高度和宽度。是否有允许设置的设置? 最佳
如何将组内三角形的 Canvas 相对位置(顶部,左侧)作为波纹管图像? 我关注了这个话题:How to get the canvas-relative position of an object t
我正在创建一个简单的组,其中包含圆圈和文本,我希望文本位于圆圈的中心。 (就像 Fabricjs.com 首页上的小组演示一样!) var text = new fabric.Text('hello
我是一名优秀的程序员,十分优秀!