fabricjs相关内容

Js:调整画布大小并继续工作

我正在使用用户上载的Fabric.js操作图像。 以下是该应用程序的工作方式 上传的图像可以在整个画布上移动和处理(灰色区域)。完成后,我只需要中间区域。 用户点击save后,当前我将绿色区域保存为图像,但我还需要将整个画布的大小调整为仅为绿色区域。 我尝试更改整个画布的width和height,然后redrawAll(),但画布位于左下角,只有一小部分工作区可见,其余部分 ..
发布时间:2022-04-07 13:35:44 前端开发

在放大Fabric JS时保持对象大小和位置

我试图在缩放时保持对象的大小,我试图从this answer中得到启发,在这种情况下,编写它的人没有解决控件问题,因此您可以看到它们在缩放时没有像this screenshot那样粘在对象上。 但我提供了此解决方案来维护对象位置和控件,方法是更新其左侧和顶部,然后根据倒置的视图计算Transform,使用Fabric.util.TransPoint函数计算新的Fabric.util.Tran ..
发布时间:2022-04-07 13:32:56 其他开发

在Fabric.js中全屏显示画布

我希望我的画布元素始终具有相同的大小-独立于客户端的屏幕分辨率。 如果用户使用浏览器进行缩放,则canvas-element应始终具有相同的大小。 此外,纵横比应该始终相同-我想要1920-1080点的坐标空间。(如果浏览器没有相同的比例,则画布元素的一侧可以有边框)。 我设法用html+css实现了这一点: 使用=100%的屏幕 max.坐标为1920x1080 但是 ..
发布时间:2022-02-22 18:46:38 其他开发

Fabric JS - 将对象发送到后面

当您选择一个对象(在我的示例中为多边形)时,它会自动移动到前面.我正在寻找一种方法来防止 z 轴上的移动或在选择后将其向后发送,也许有人可以帮忙? 这是一个简单示例的链接:http://jsfiddle.net/98cuf9b7/1/ 当您选择其中一个多边形时,它会移到前面.我尝试在选择后将其向后发送,但即使调用了“canvas.sendToBack(object)"函数,它仍然保留在 ..
发布时间:2022-01-19 12:34:18 前端开发

分组和取消分组 Fabric.js 对象

我使用 fabric.js 创建了一种“多边形选择器"或“多边形制造器".每次单击都会创建多边形的一个角,可以选择、移动等...双击原点“关闭"多边形.在这一点上,我将构成多边形的所有圆/线分组并将它们分组.到目前为止一切顺利. 当双击这样的组时,我希望它取消组合并恢复为可移动节点(即移动圆圈会重塑多边形等);但是发生了一些奇怪的事情 - 看看当你移动圆圈时会发生什么,某些线似乎“没有加入" ..
发布时间:2022-01-17 12:15:34 前端开发

Fabricjs HTML5 Canvas:为什么图像大小调整得这么差?

当我将 775 x 775 的图像添加到 fabricjs 画布并将其调整到大约 90 x 90 时,图像的质量会大大降低. 但是,如果我将相同的图像添加为 并将其缩小,它会保留其质量. 为什么画布图像变得如此低质量?如何使画布图像像 一样保持其原始质量? 解决方案 应该可以去评论一下,可惜我是新手,不能加评论.但是,对我来说,这看起来像是抗锯齿问题 ..
发布时间:2022-01-17 12:15:12 前端开发

在 Fabric.js 中克隆对象

我正在使用一个简单的函数在 Fabric.js 的画布上克隆一个选定的对象. function duplicateObj() {var obj = canvas.getActiveObject();var clone = fabric.util.object.clone(obj);clone.set({left: 100,top: 100});canvas.add(克隆);} 这绝对没问题.现 ..
发布时间:2022-01-17 12:15:02 其他开发

使用 Fabric.js 选择画布上的所有对象

有没有办法显式选择在特定时间实例中存在的所有对象.这可以很容易地使用鼠标选择所有.是否有一个代码解决方案,例如一个名为 Select All 的按钮,以便单击它会使所有织物类型对象都被选中,然后我可以使用 canvas 将更改应用于整个 ActiveGroup.getActiveGroup(); 并迭代. 解决方案 好问题. 对此没有内置方法,但您需要按照以下方式进行操作: var ..
发布时间:2022-01-17 12:12:50 前端开发

在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

目标:通过 Fabric.js 或通过 Javascript 保持原始对象的纵横比相同,但又不超过父对象的宽度/高度比例? 父对象(矩形或组)不会以 canvas 元素为中心. 这是我到目前为止的代码:https://stackblitz.com/edit/angular-my8hky 我的 app.component.ts 到目前为止: canvas: fabric.Canv ..
发布时间:2022-01-17 12:08:14 前端开发

防止画布对象发生碰撞或相交

我正在画布上绘制 n 个矩形.矩形是可拖动和可缩放的.我想防止它们重叠或相交.最好的情况是,如果它们只是相互对齐. 我想办法检查十字路口.在我的示例中,我将触摸对象的不透明度设置为 0.1. 巧合的是,在我尝试解决此问题时,我的对象在接触另一个对象时无法释放.请参阅 http://jsfiddle.net/gcollect/jZw7P/这是因为第 91 行没有执行警报.alert(ma ..

Fabrics - 如何在鼠标悬停之前呈现免费的绘图内容

我有一个组件在“after:render"事件中使用 fabricjs 画布内容,这适用于添加对象、移动对象等所有功能. 然而,当涉及到自由绘图时,“after:render"事件仅在绘图完成后触发,即鼠标向上事件.我试图在鼠标绘图时读取画布数据但没有运气,显然在绘图期间内容尚未呈现到画布上. 我从这个 PR https://github.com/fabricjs/fabric 了解到 ..
发布时间:2022-01-17 11:57:35 前端开发

使用 fabricjs 模拟自由绘图

我正在开发具有白板的应用程序.白板应该像 idroo.com 一样工作.一个用户正在绘制一些其他用户应该能够在他的浏览器上实时看到的东西.我使用fabricjs 作为画布包装器,它有我需要的一切.但我无法在画布上模拟自由绘图.我将鼠标位置和画笔选项发送到远程客户端,并尝试通过触发鼠标移动事件来呈现它们.但它不起作用.如果有人有类似的问题,你能帮忙吗? canvasContainer.on('mo ..
发布时间:2022-01-17 11:56:40 前端开发

在放大织物js时保持对象大小

即使用户放大或缩小,是否有任何解决方案可以保持对象大小?我想在谷歌地图上实现类似的行为.因此,如果我有一个高度和宽度为 20 的对象(对象组),即使我放大它,默认情况下它仍应为 20 像素.现在我的行​​为是,当用户放大或缩小图像时,图像会变大/变小.我还循环了画布上的所有对象,然后为其设置了 scaleX 和 scaleY,但结果对我来说太迟钝了. var canvas = new fab ..
发布时间:2022-01-17 11:55:22 前端开发

我们在 Fabric.js 中有画布修改事件吗?

在 Fabric.js 中,我们有对象修改事件,例如 object:modified.整个画布是否有类似的事件. 实际上我正在尝试实现撤消和重做功能.如果画布上发生任何事情,我会将画布保存为 JSON,然后再次加载以进行撤消功能. 对于 Fabric.js 中的这个特性,我们有什么更好的解决方案吗? 解决方案 不要忘记检查添加/删除的对象.你可以这样实现它: var canv ..
发布时间:2022-01-17 11:50:07 其他开发

向控件添加自定义删除(后退、前移)按钮

我想知道是否有一种简单的方法可以添加删除、放在前面、放在后面将函数添加到现有的 fabric.js 对象控件中. 目前我只能点击删除对象、放在前面等按钮. 我正在努力寻找能够在对象上按 X(右上角)并删除该对象的解决方案. 我猜这与覆盖、包装或继承现有的控件对象有关. 也许我已经监督了一些事情并且有一个简单的解决方案?请不要使用 Div Wrapper. 解决方案 ..
发布时间:2022-01-17 11:43:22 前端开发