javascript - 无法将 FabricJS svg 或组对象移动到画布左上角
问题描述
我正在开发一个 FabricJS 应用程序,我希望用户通过简单的单击将对象移动到画布原点,即使在旋转或缩放对象或一组对象之后也是如此。为此,当单击时,我在用户单击时执行以下代码:
obj.left= obj.getBoundingRect().width/2;
obj.top=obj.getBoundingRect().height/2;
它适用于矩形或文本,但在使用形状、svg 甚至对象组时根本不起作用。我不知道为什么!
下面是完整的代码。
重要提示:请在您的浏览器中启用跨域访问以加载 svg。
this.__canvas = new fabric.Canvas('meCanvas', {
preserveObjectStacking: true,
height: 400,
width: 400,
backgroundColor: '#1F1F1F',
canvasKey:'azpoazpoaz'
});
let rect = new fabric.Rect({
fill: 'red',
width: 200,
height: 100,
left: 100,
top: 100,
originX: 'center',
originY: 'center',
fontWeight: 'normal'
});
let text = new fabric.IText('Text', {
fontFamily: 'Times',
fontSize: 18,
fill: 'white',
left: 100,
top: 100,
originX: 'center',
originY: 'center',
fontWeight: 'normal'
});
let url = 'https://svgshare.com/i/9DX.svg';
fabric.loadSVGFromURL(url,(objects,options)=> {
let loadedObjects = fabric.util.groupSVGElements(objects, options);
loadedObjects.left=50;
loadedObjects.top=150;
this.__canvas.add(loadedObjects);
});
let url2 = 'https://svgshare.com/i/9Cp.svg';
fabric.loadSVGFromURL(url2,(objects,options)=> {
let loadedObjects = fabric.util.groupSVGElements(objects, options);
loadedObjects.left=100;
loadedObjects.top=200;
loadedObjects.angle=20;
this.__canvas.add(loadedObjects);
});
this.__canvas.add(rect);
this.__canvas.add(text);
this.__canvas.renderAll();
$('#pushorigin').click((e)=>{
let obj = this.__canvas.getActiveObject();
obj.left= obj.getBoundingRect().width/2;
obj.top=obj.getBoundingRect().height/2;
this.__canvas.requestRenderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div style='display: inline-block'>
<div>
<canvas id='meCanvas' ref='meFabric'/>
</div>
<div>
<button id='pushorigin'>Push to origin</button>
</div>
</div>
如果您选择文本或矩形并单击“推到原点”按钮,它们将转到原点(左上角)。但同样的动作不适用于 svg(三角形和多边形),如果我们拉伸这些 svg 甚至旋转它们,情况会变得更糟,它们不会回到原点。使用一组对象时也是如此!
我不知道该怎么办,我迷路了。我已经用谷歌搜索了几天,一无所获。
请帮忙!
解决方案
为所有对象设置originX: 'center',originY: 'center'
,然后您的解决方案将起作用。
this.__canvas = new fabric.Canvas('meCanvas', {
preserveObjectStacking: true,
height: 400,
width: 400,
backgroundColor: '#1F1F1F',
canvasKey: 'azpoazpoaz'
});
let rect = new fabric.Rect({
fill: 'red',
width: 200,
height: 100,
left: 100,
top: 100,
originX: 'center',
originY: 'center',
fontWeight: 'normal'
});
let text = new fabric.IText('Text', {
fontFamily: 'Times',
fontSize: 18,
fill: 'white',
left: 100,
top: 100,
originX: 'center',
originY: 'center',
fontWeight: 'normal'
});
let url = 'https://svgshare.com/i/9DX.svg';
fabric.loadSVGFromURL(url, (objects, options) => {
let loadedObjects = fabric.util.groupSVGElements(objects, options);
loadedObjects.set({
left: 50,
top: 150,
originX: 'center',
originY: 'center'
})
this.__canvas.add(loadedObjects);
});
let url2 = 'https://svgshare.com/i/9Cp.svg';
fabric.loadSVGFromURL(url2, (objects, options) => {
let loadedObjects = fabric.util.groupSVGElements(objects, options);
loadedObjects.set({
left: 100,
top: 200,
angle: 20,
originX: 'center',
originY: 'center'
})
this.__canvas.add(loadedObjects);
});
this.__canvas.add(rect);
this.__canvas.add(text);
this.__canvas.renderAll();
$('#pushorigin').click((e) => {
let obj = this.__canvas.getActiveObject();
obj.set({
left: obj.getBoundingRect().width / 2,
top: obj.getBoundingRect().height / 2
}).setCoords()
this.__canvas.requestRenderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div style='display: inline-block'>
<div>
<canvas id='meCanvas' ref='meFabric'/>
</div>
<div>
<button id='pushorigin'>Push to origin</button>
</div>
</div>
推荐阅读
- spring - Spring webflux ReactiveMongoOperations 由 elemMatch 找到
- python - 从文本文件中检查用户 ID、密码时登录验证失败
- python-3.x - 从字典列表创建python数据框
- webpack - 如何使用 webpack 将 css 和 js 内联到 html 中并移除未使用的样式
- angular - openapi 生成器 typescript-angular 在方法名称的末尾添加数字
- c# - 将数据行从 C# 中的另一个 sql 表插入到 sql 表中
- vue.js - Vue nuxt npm run dev new img not found
- javascript - 如何使用 Express 发送 javasript?
- html - 为什么我在安装 reCaptcha v3 后仍然收到垃圾邮件
- c# - 将附加数据传递给 Blazor 组件中的通用 RenderFragment