正文 

当前位置： 首页 > 源码 >

FabricJS：始终在画布上居中对象

     2023-03-24     136

关键词：

【中文标题】FabricJS：始终在画布上居中对象【英文标题】：FabricJS: Always Center Object on Canvas 【发布时间】：2013-06-20 15:31:05 【问题描述】：

是否可以在 fabricjs 画布上始终将对象居中？

背景：我正在构建一个 web 工具，可以很容易地使用 fabricjs 创建复杂的动画。我希望能够将宽度和高度的画布大小设置为 100%。因此，我想将所有对象放在中心并为其添加 X/Y 偏移量。当我稍后调整画布大小时，我可以使用 x/y 偏移从中心重新调整对象。

有这样的内置功能吗？或者我应该简单地向对象添加一个属性，如果画布正在调整大小 - 检查所有对象的该属性并从新画布的中心重新调整对象的位置？

问候和感谢 罗伯特

【问题讨论】：

【参考方案1】：

或者你可以像这样将对象居中

    // add the image object 
    Canvas.add(oImg)
    // set the object to be centered to the Canvas
    Canvas.centerObject(oImg);

    Canvas.setActiveObject(oImg);
    Canvas.renderAll();

【讨论】：

图像居中后，需要调用oImg.setCoords()才能将其坐标移动到正确的位置。当你省略调用时，图像会被移动，但你需要点击它的旧位置才能与之交互。【参考方案2】：

Fabric 对象有以下居中方法：

obj.center();  // Centers object vertically and horizontally on canvas to which is was added last
obj.centerV(); // Centers object vertically on canvas to which it was added last
obj.centerH(); // Centers object horizontally on canvas to which it was added last

我在文档中没有看到任何关于偏移的内容。

类似下面的东西可能会起作用

var canvas = new fabric.Canvas('c');

$(window).resize(function()

     var w = $(window).width();
     var h = $(window).height();
     var center = x:w / 2, y:h / 2);

     canvas.setDimensions(width:w,height:h);
     canvas.forEachObject(function(obj)

        obj.set(
            left : center.x + obj.offsetLeft,
            top : center.y + + obj.offsetTop,
        );

        obj.setCoords();

    );

// need to call calcOffset whenever the canvas resizes
canvas.calcOffset();
canvas.renderAll();

);

【讨论】：

中心操作后不要忘记.setCoords()！

在 FabricJS 画布上拖放和删除对象

】在FabricJS画布上拖放和删除对象【英文标题】：Drag,dropanddeleteobjectsonFabricJScanvas【发布时间】：2017-08-0814:53:13【问题描述】：我在使用JQuery处理FabricJS时遇到问题。选择一个对象并单击删除没有问题。这是我的代码演示Fiddle我可... 查看详情

是否可以同时在 FabricJS 画布上独立拖放多个对象？

】是否可以同时在FabricJS画布上独立拖放多个对象？【英文标题】：Isitpossibletoindependentlydrag&dropmultipleobjectsonaFabricJScanvasatthesametime?【发布时间】：2014-02-1618:42:58【问题描述】：我正在开发带有Fabric.js的基于触摸的应用程序。... 查看详情

FabricJS动画：鼠标：向上和：向下期间画布上的选定对象

】FabricJS动画：鼠标：向上和：向下期间画布上的选定对象【英文标题】：FabricJSanimating:selectedobjectoncanvasduringmouse:upand:down【发布时间】：2017-09-1405:39:34【问题描述】：我正在尝试使用FabricJS在任何对象被选中时为其设置动画。Sow... 查看详情

如何在fabricJS中向圆形对象添加文本？

】如何在fabricJS中向圆形对象添加文本？【英文标题】：HowtoaddtexttoacircleobjectinfabricJS?【发布时间】：2016-08-0120:13:02【问题描述】：我在这里搜索fabricJS-circle，但没有找到添加数字1或2或3等文本的方法...在画布上的圆圈内？这是... 查看详情

Fabricjs：在画布上更新 SVG

】Fabricjs：在画布上更新SVG【英文标题】：Fabricjs:UpdateSVGonthecanvas【发布时间】：2019-01-2022:23:35【问题描述】：我使用的是fabricjs1.6.4，我想用新的svg更新现有的svg。我正在使用此代码添加新的SVG：fabric.loadSVGFromURL(url,function(objects,... 查看详情

集成 Fabricjs 和 Angularjs

】集成Fabricjs和Angularjs【英文标题】：IntegratingFabricjsandAngularjs【发布时间】：2013-08-1922:53:02【问题描述】：我正在尝试构建一个在屏幕上编辑简单图形的应用程序，fabricjs是我使用的画布库，angularjs是我使用的MVW框架。现在，从D... 查看详情

使用 FabricJs 在同一画布上裁剪多个图像

】使用FabricJs在同一画布上裁剪多个图像【英文标题】：CropmultipleimagesonsamecanvasusingFabricJs【发布时间】：2016-12-2023:07:38【问题描述】：我想将图像添加到画布并一次选择一个并应用裁剪以请看一下：http://jsfiddle.net/kNEaX/586/原帖：... 查看详情

如何使fabricJS画布在移动设备上可水平拖动？

】如何使fabricJS画布在移动设备上可水平拖动？【英文标题】：HowtomakeafabricJScanvasdraggablehorizontallyonmobile?【发布时间】：2021-06-0811:38:39【问题描述】：我正在尝试创建一个比我的手机屏幕更宽的画布，用户可以左右拖动以查看画... 查看详情

画布上的 FabricJS AngularJS 事件

】画布上的FabricJSAngularJS事件【英文标题】：FabricJSAngularJSEventsonCanvas【发布时间】：2015-08-1422:55:45【问题描述】：我正在开发一个MEANStack应用程序，我在上面使用FabricJS。为了更轻松地工作，我找到了https://github.com/michaeljcalkins/an... 查看详情

Fabric Js - 是不是可以将图像对象自动缩放到画布上？

】FabricJs-是不是可以将图像对象自动缩放到画布上？【英文标题】：FabricJs-Isitpossibletoautoscaleaimageobjecttothecanvas?FabricJs-是否可以将图像对象自动缩放到画布上？【发布时间】：2016-05-2801:02:41【问题描述】：我们目前通过以下代码... 查看详情

如何在保持背景的画布上修剪对象并将其居中？

】如何在保持背景的画布上修剪对象并将其居中？【英文标题】：Howtotrimandcenteranobjectonthecanvaskeepingthebackground?【发布时间】：2021-09-1306:52:26【问题描述】：有这样的输入图像我需要修剪到3:4的比例，将人放在3:4画布的中心，然... 查看详情

从 Vue 方法更新 FabricJS 对象

】从Vue方法更新FabricJS对象【英文标题】：UpdatingFabricJSobjectsfromVuemethod【发布时间】：2021-05-2406:28:37【问题描述】：我正在尝试通过Vue控件更新Fabricjs画布。我正在通过“mounted()”初始化画布，但不知道如何在函数中访问画布而... 查看详情

无法将 FabricJS svg 或组对象移动到画布左上角

】无法将FabricJSsvg或组对象移动到画布左上角【英文标题】：Can\'tmoveFabricJSsvgorgroupobjectstothecanvastopleftcorner【发布时间】：2019-04-0810:10:03【问题描述】：我正在开发一个FabricJS应用程序，我希望用户通过简单的单击将对象移动到画... 查看详情

将图像拖放到画布（FabricJS）

】将图像拖放到画布（FabricJS）【英文标题】：DragAndDropImagetoCanvas(FabricJS)【发布时间】：2015-11-0702:32:31【问题描述】：问题我想用图像而不是canvas对象来做到这一点。这意味着您必须先添加要添加到画布的内容并作为画布的一部... 查看详情

从画布中删除图像-fabricjs（javascript）

】从画布中删除图像-fabricjs（javascript）【英文标题】：removeimagefromcanvas-fabricjs(javascript)【发布时间】：2015-07-2917:49:39【问题描述】：我正在开发Web应用程序，其中大部分部分已被Angularjs覆盖。我被困在一个点上。我使用fabric.js... 查看详情

如何从 JSON 重新加载自定义 fabricJS 画布对象？

】如何从JSON重新加载自定义fabricJS画布对象？【英文标题】：HowdoIreloadcustomfabricJScanvasobjectsfromJSON?【发布时间】：2021-06-1700:49:01【问题描述】：我正在使用fabricJS和自定义类。我遇到了canvas.loadFromJSON()的问题，所以我从anotherquesti... 查看详情

使用 FabricJs 的裁剪功能

】使用FabricJs的裁剪功能【英文标题】：CropFunctionalityusingFabricJs【发布时间】：2013-09-1423:41:15【问题描述】：如何在使用fabric.js加载到画布上的图像上实现裁剪工具？我在画布上加载了一个图像。现在我想实现裁剪工具，允许用... 查看详情

Fabricjs：在拖动时显示水平和垂直位置线

】Fabricjs：在拖动时显示水平和垂直位置线【英文标题】：Fabricjs:Showhorizontalandverticalpositionlineondrag【发布时间】：2018-12-1312:37:24【问题描述】：我正在使用fabricjs1.5，但我一直坚持下去。每当我开始拖动对象时，我想水平和垂直... 查看详情