正文 

当前位置： 首页 > 源码 >

fabricjs：缩放后如何显示对象大小

     2023-05-09     40

关键词：

【中文标题】fabricjs：缩放后如何显示对象大小【英文标题】：fabricjs: how to show object size after scaling 【发布时间】：2015-08-23 12:28:55 【问题描述】：

我正在使用名为“Woocommerce Product Designer”的 wordpress 插件，其中包含一个 1.4.9 版中名为 fabicjs 的 JavaScript 库。

在我重新缩放对象之后（或同时），我需要一种方法来显示织物中对象的宽度和高度。

我直接在文件fabric-all.min.js中做了一些调整：

_beforeTransform: function (e, t) 
    var myHeight = Math.floor(t.currentHeight);
    var myWidth = Math.floor(t.currentWidth);
    if(!jQuery("#size").length)
        jQuery('<p id="size"></p>').insertBefore(".upper-canvas");
    
    else
        jQuery("#size").html("<span>size: </span>"+myWidth +" x "+myHeight +" cm"+"<br>");
                                                      
    var n;
    this.stateful && t.saveState(), (n = t._findTargetCorner(this.getPointer(e))) && this.onBeforeScaleRotate(t), t !== this.getActiveGroup() && t !== this.getActiveObject() && (this.deactivateAll(),     this.setActiveObject(t, e))
,

它可以工作，但它会在当前转换开始之前显示先前转换的值。这样，我需要另一个操作（例如简单地单击对象）来更新为当前值。

所以我需要调用一些模拟点击对象的函数来更新值，或者将我的代码移动到另一个函数，该函数在转换期间（或之后）调用并且可以访问有关当前对象大小的信息。

【问题讨论】：

【参考方案1】：

我认为更改 fabricJs 源不是一个好主意。最好扩展它或做一些功能。我让你jsFiddle 告诉你如何在缩放时获取对象的宽度和高度。

canvas.on('object:scaling', function()
    var obj = canvas.getActiveObject();
    $('#rect-width').val(Math.floor(obj.getWidth()));
    $('#rect-height').val(Math.floor(obj.getHeight()));
);

【讨论】：

非常感谢。这正是我想要的。实际上我是 javascript 的初学者，我直接更改了 fabricJs 源代码是因为我懒得去了解如何将它用作 API，即使我知道它要好得多

FabricJS 缩放图像以适应宽度/大小

】FabricJS缩放图像以适应宽度/大小【英文标题】：FabricJSscaleimagetofitwidth/size【发布时间】：2018-08-1802:58:31【问题描述】：如何正确缩放图像以适合容器大小？我想要一个由两个图像组成的网格，每个图像都适合提供的大小。https:... 查看详情

Fabric JS 2.4.1 如何使用 clipPath 裁剪已缩放为小于或大于 1:1 比例的图像

】FabricJS2.4.1如何使用clipPath裁剪已缩放为小于或大于1:1比例的图像【英文标题】：FabricJS2.4.1HowtouseclipPathtocropimagethathasbeenscaledsmallerorlargerthen1:1Ratio【发布时间】：2019-03-1316:49:46【问题描述】：在调整目标图像的大小后，在计算蒙... 查看详情

Fabricjs 平移和缩放

】Fabricjs平移和缩放【英文标题】：Fabricjspanandzoom【发布时间】：2015-08-0814:04:10【问题描述】：如何使用fabricjs进行平移和缩放？我试过使用zoomToPoint和setZoom方法，但它们不适用于平移。一旦我开始使用不同的缩放点，我就会遇... 查看详情

如何修复 FabricJS 中 Inkscape SVG 的缩放和旋转？

】如何修复FabricJS中InkscapeSVG的缩放和旋转？【英文标题】：HowcanIfixtheScalingandRotatingofanInkscapeSVGinFabricJS?【发布时间】：2014-03-2307:58:03【问题描述】：我在使用FabricJS缩放和旋转SVG图像时遇到了一些问题。我一直在为我的网站开发... 查看详情

FabricJs：将对象大小固定在组调整大小上

】FabricJs：将对象大小固定在组调整大小上【英文标题】：FabricJs:KeepObjectSizefixedonGroupReszing【发布时间】：2021-11-1901:37:37【问题描述】：我正在使用FabricJS创建一个包含两个对象的组-光图标(svg)和阴影(三角形)。我将LightIconSVG作为... 查看详情

Fabric js：使用鼠标调整大小时增加字体大小而不是仅仅缩放

】Fabricjs：使用鼠标调整大小时增加字体大小而不是仅仅缩放【英文标题】：Fabricjs:Increasefontsizeinsteadofjustscalingwhenresizewithmouse【发布时间】：2016-02-1500:48:41【问题描述】：我正在开发fabricjs应用程序，当我们用鼠标调整字体大小... 查看详情

在 FabricJS 中调整窗口大小时如何始终将剪切区域居中？

】在FabricJS中调整窗口大小时如何始终将剪切区域居中？【英文标题】：HowtoalwaycenterclippedareawhileresizewindowinFabricJS?【发布时间】：2019-03-0616:43:10【问题描述】：请帮我解决这个问题。我有一个画布区域总是填满屏幕大小，背景是... 查看详情

是否可以使用fabricjs以英寸为单位获取文本或图像对象的大小？

】是否可以使用fabricjs以英寸为单位获取文本或图像对象的大小？【英文标题】：Isitpossibletogetsizeofatextorimageobjectininchesusingfabricjs?【发布时间】：2014-12-2612:57:51【问题描述】：我正在为产品设计师使用fabricjs。我需要以英寸为单... 查看详情

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

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

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

】FabricJS：始终在画布上居中对象【英文标题】：FabricJS:AlwaysCenterObjectonCanvas【发布时间】：2013-06-2015:31:05【问题描述】：是否可以在fabricjs画布上始终将对象居中？背景：我正在构建一个web工具，可以很容易地使用fabricjs创建复... 查看详情

从 Vue 方法更新 FabricJS 对象

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

如何在three.js中缩放，将对象定位到正确的大小

】如何在three.js中缩放，将对象定位到正确的大小【英文标题】：Howtoscale,positionanobjecttotherightsizeinthree.js【发布时间】：2021-11-2520:08:13【问题描述】：我刚开始学习three.js，我想测试使用gltf加载器的导入模型。当我加载某个3d模... 查看详情

使用 transformMatrix 转换点如何在 fabricJS 中工作？

】使用transformMatrix转换点如何在fabricJS中工作？【英文标题】：HowdoestransformingpointswithatransformMatrixworkinfabricJS?【发布时间】：2016-12-2406:04:41【问题描述】：我正在尝试在fabric.Polygon的角上放置点（通过fabric.Circle创建）。用户可以... 查看详情

对象以编程方式移动后的Fabricjs在其新位置上不可选择

】对象以编程方式移动后的Fabricjs在其新位置上不可选择【英文标题】：Fabricjsafterobjectmoveprogrammaticallyitsnotselectableonitsnewposition【发布时间】：2013-12-0808:23:36【问题描述】：我试图以编程方式移动对象并获得成功，但是通过编程... 查看详情

Fabricjs：如何只显示图像的一部分？

】Fabricjs：如何只显示图像的一部分？【英文标题】：Fabricjs:howtodisplayonlyapartofimage?【发布时间】：2020-05-2413:20:29【问题描述】：我想使用fabricjs在画布上显示一部分图像（如html、css中的精灵和背景位置）。默认情况下，fabricjs会... 查看详情

添加或删除对象时如何添加动画 - Fabricjs

】添加或删除对象时如何添加动画-Fabricjs【英文标题】：Howtoaddanimationwhenaddingorremovinganobject-Fabricjs【发布时间】：2017-06-1314:12:50【问题描述】：我将FabricJS用于我的图像处理库。我想知道如何将动画添加到画布中/从画布中删除的... 查看详情

canvas - 使用fabricjs和angularjs进行捏缩放

】canvas-使用fabricjs和angularjs进行捏缩放【英文标题】：canvas-pinchzoomingusingbyfabricjsandangularjs【发布时间】：2014-11-0215:05:13【问题描述】：我正在尝试使用FabricJs在画布上进行捏合缩放。但我对此一无所知。我还从谷歌搜索了一些代... 查看详情

浏览器缩放图片的大小

如图一张图片，代码如下在设置了高度后，宽度会随原比例自动调整。并且无论浏览器如何缩放，图片保持不变。如果不设置高度，那么图片大小是自身大小，并且会随着浏览器的缩放在视觉上显示缩放效果。 查看详情