我正在创建一个带有(折线)工具的三角形,试图制作一个矩形三角形.一切都很好,但创建的三角形不在它的边界框内,这会导致事后的问题.我已经实现了它来创建一个多边形,多边形在它的边界框内居中,但应用相同的技术似乎不适用于折线三角形的情况.
这个jsFiddle显示出不需要的行为.
也许我必须改变'originX'和'originY',但我尝试了几种不同的组合,但没有解决:
const triangle = new fabric.Polyline(calcPoints(originX, originY, originX, originY), {
objectCaching: false,
left: originX,
top: originY,
originX: 'left',
originY: 'top',
fill: '#0000FF',
includeDefaultValues: false});
我还在鼠标上使用newShape.setPositionByOrigin方法:
newShape.setPositionByOrigin(position, 'top', 'left');
对于多边形情况,我还为形状应用了pathOffset,但这里导致事件更大的偏移量.
有没有办法修复放置在边界框中的形状？
问候!
我正在尝试在Fabric Js的上下文中创建自定义绘图工具.通过自定义我的意思是应用于每个绘制的自由线自定义属性,例如:
1) - 创建对象的id;
2) - 谁创造了它;
3) - 何时创建
4) - 何时更新
5) - 等
export class Circle extends fabric.Circle implements ExtendedFabricOptions {
id: string;
createdBy: string;
editedBy: string;
createdOn: string;
updatedOn: string;
constructor(props: ICircleOptions) {
super(props);
this.id = props.id;
this.createdBy = props.createdBy;
this.editedBy = props.editedBy;
this.createdOn = props.createdOn;
this.updatedOn = props.updatedOn;
}
}
onMouseDown(e: fabric.IEvent) {
const mousedownPointer: fabric.ICoords2d = {
x: e.pointer.x,
y: e.pointer.y
};
const object: Circle = new Circle({ …我是 fabric.js 的新手，对浏览器画布 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 …我有一个videogular2用于运行音频文件的angular 6应用程序。包含vg-player（父组件）的组件是ngSwitch语句的一部分，因此是？可以销毁的组件。
当视图更改时，我需要在后台运行音频。但是，当视图改变时，播放器的所有者将被破坏。
我无法更改这种复杂的开关逻辑，也无法隐藏组件。
我看到的唯一选项是在视图中显示播放器的控件（播放，暂停，音量和进度条），但播放器的源将放置在当前父项持有者组件之外。这样，当视图被破坏时，音频将保留在背景中。
<video id="singleVideo"
[muted]="isMuted"
preload="auto"
[vgMedia]="media"
playsinline>
<source [src]="videoSrc" type="video/mp4">
</video>
总结：
-是否可以将多个不同的视图（仅保留播放器的控件）链接到一个源？
-将源放置在视图之外？
-要同步进度条吗？
-如果一个视图被破坏，剩下的视图将保留下来，并且从每个视图可以命令媒体播放器使用？
-在某些命令上要同步所有控件？
先感谢您！我认为这是非常合法的用例，值得观察。
使用新的 3.0.0 版 Fabric JS，我们必须应用requestRenderAll()才能在一个对象处于活动状态时查看句柄。
我的问题是：
确实requestRenderAll()取代了某种renderAll()方法。两种方法之间是否有任何重要区别。当我们必须使用它们中的每一个时，我们是否必须一起使用它们？
我现在认为Canvas.renderall是同步操作和requestRenderAll()方法被视为改进。但是我们是否还需要renderAll()，如果“是”，什么时候。而且 -renderAll()会在不久的将来被弃用吗？