fabricjs相关内容

Fabric.js 动态裁剪单个对象

我正在动态添加一个矩形元素来裁剪/剪辑(使用clipTo)选定的元素,它在第一次时效果很好,但是当我在画布上添加第二个元素并开始裁剪第二个元素时,第一个元素会丢失裁剪/剪辑.下面是我的代码,有 2 个按钮 1 开始裁剪/剪辑(在要裁剪的元素上放置一个动态矩形)第二个进行裁剪/剪辑. $('#crop').on('click', function (event) {var left = el.le ..
发布时间:2022-01-17 11:37:00 前端开发

Fabric.js 橡皮擦问题画布

我想使用 Fabric.js 在我的网络应用中实现橡皮擦.有没有办法在 Fabric.js 中实现橡皮擦?例如,比如在 MS Paint 中? 解决方案 Fabric 没有内置橡皮擦,实现起来有点困难. Fabric 的特点是一切都是基于对象的,而且大多数东西也是基于向量的. 与原生画布不同,我们不能只擦除全局位图上的一些像素.我们在下面有整个对象模型,画布输出是所有渲染到画布 ..
发布时间:2022-01-17 11:36:14 其他开发

Fabric.js 的文本框不换行

我正在使用 Fabric.js 的 Textbox.我给了一个固定的宽度.但是,如果用户键入一个没有任何空格的长单词,超过了给定的文本框宽度,则它不会换行. 有什么办法吗? 解决方案 是的,有一个你可能喜欢或不喜欢的解决方案来实现分词: 覆盖fabric默认的换行函数: fabric.Textbox.prototype._wrapLine = function(ctx, te ..
发布时间:2022-01-17 11:35:41 前端开发

防止 Fabric js 对象超出画布边界

我一直试图将一个对象(在画布上用织物 js 构建)保持在边界内.它已在移动和旋转它时实现.我得到了 在画布边界限制内移动对象 的帮助来实现这一点.但是当我开始缩放对象时,它只是不断超出边界.我不明白必须做什么才能将其仅保持在边界内,即使在缩放时也是如此.请帮助我编写代码以防止这种行为.如果能附上demo就好了. 基本用法 ..
发布时间:2022-01-17 11:19:41 前端开发

Fabric.js 画布上的多个剪切区域

为了制作Photo Collage Maker,我使用了具有基于对象的剪辑功能的fabric js.此功能很棒,但该剪切区域内的图像无法缩放、移动或旋转.我想要一个固定位置的剪切区域,并且可以根据用户的需要将图像定位在固定剪切区域内. 我用谷歌搜索并找到了非常接近的解决方案. var canvas = new fabric.Canvas('c');var ctx = canvas.getC ..
发布时间:2022-01-17 11:14:34 其他开发

在 Fabric.js 中使用 setAngle() 后,旋转和缩放控件关闭

我想让用户在 Fabric.js 驱动的画布上旋转对象,但将它们的旋转限制为 90 度增量.想法是,当它们旋转然后停止时,对象会以最近的角度“卡入"到位. 通过监听“object:rotating",设置最近的角度,然后调用 object.setAngle(angleClosestTo90) 可以正常工作.但是,一旦对象被“捕捉",用于缩放/旋转图像的控件就会关闭.你仍然可以选择它们,但它很 ..
发布时间:2022-01-16 14:54:55 其他开发

拖放到 Fabric.js 画布中

如何将项目(如图像或其他画布中的其他对象)拖放到由 fabricjs 管理的画布中?我找到了许多如何在画布内移动项目的示例,但我想将项目从外部元素拖放到画布中. 解决方案 既然你要了一个例子,我还没有自己尝试过,这里是: 小提琴示例 标记 ..
发布时间:2022-01-11 20:44:05 其他开发

如何为 Fabric.js 启用响应式设计

有没有办法使用浏览器调整 Fabric.js 画布的大小以在任何设备上启用相同的结果?我说的是响应式设计. 有人有代码示例吗? 解决方案 基本上你需要获取设备屏幕的宽度和高度.之后只需在您的 Javascript 中相应地调整画布的大小.示例: var width = (window.innerWidth > 0) ?window.innerWidth : 屏幕宽度;var hei ..
发布时间:2022-01-04 18:42:26 其他开发

缩放 fabric.js 画布对象

我的页面上有一个 fabric.js 画布,我想要响应.我的代码适用于缩放画布本身,但不适用于我在其上绘制的对象.任何的想法?我已经搜索过 SO,但找不到适合我的解决方案. var resizeCanvas;调整大小画布 = 函数(){var 高度、比例、宽度;比率 = 800/1177;width = tmpl.$('.canvas-wrapper').width();高度=宽度/比例;can ..
发布时间:2021-12-22 23:00:33 前端开发

如何使用 Fabric.js 做 Visio 之类的带有连接的绘图?

我最近开始在一个项目中使用 Fabric.js,它很棒.它为画布提供了一个抽象层,并有一个完整的“对象操作层/蒙版"伴随每个对象. 我想更进一步,利用它来制作实际图表,在对象之间建立连接,以及每个对象附带更多“元数据".有没有人已经这样做了?Fabric.js 是正确的选择吗? 关于我将如何在两个对象之间创建“连接器"对象的任何想法,这些对象响应来自它们所附加的对象的事件? 解决 ..
发布时间:2021-12-21 08:47:57 前端开发

以鼠标位置为中心的图像缩放

我正在使用 Fabric.js 编写脚本以在当前鼠标位置缩放图像.我取得了一些进展,但某处有错误. 案例 1:将鼠标保持在一个点并用鼠标滚轮缩放. 结果:完美运行,图像在该特定像素处缩放. 案例 2: 在一个位置稍微放大(用鼠标滚轮 3-5 倍),然后将鼠标移动到一个新位置并在那里放大. 结果:第一个点可以正常工作,但是移动到另一个点并缩放后,图像位置不正确. 我的代 ..
发布时间:2021-12-21 08:46:28 前端开发

Fabricjs 平移和缩放

如何使用fabricjs 进行平移和缩放?我试过使用 zoomToPoint 和 setZoom 方法,但它们不适用于平移.一旦我开始使用不同的缩放点,我就会遇到麻烦. $('#zoomIn').click(function(){canvas.setZoom(canvas.getZoom() * 1.1) ;});$('#zoomOut').click(function(){canvas.set ..
发布时间:2021-12-21 08:45:37 前端开发

在画布边界限制内移动对象

我正在尝试限制画布内的移动对象,但是在顶部和左侧的限制区域中移动对象时遇到了一些困难,当我将对象缩放得更大时,我也无法限制移动画布左侧和顶部的对象 canvas.observe("object:moving", function(e) {var obj = e.target;//如果对象太大忽略if(obj.currentHeight > obj.canvas.height || obj.cur ..
发布时间:2021-12-21 08:45:31 前端开发

将用户计算机中的图像添加到画布

我正在开发一款允许用户创建动态幻灯片的网络应用.目前,无论如何将计算机用户的图像添加到画布,我都遇到了问题.我正在使用输入按钮从计算机获取文件,它吸引了一个将图像添加到画布的功能. 到目前为止,我已经尝试了不同的方法将图像添加到画布以及这个:将图像动态添加到画布 但是这里显示的代码在我的情况下不起作用,因为它只是将图像绘制到画布中,但不允许它像 Fabricsjs 的 Kitchens ..
发布时间:2021-12-21 08:41:21 前端开发

如何编辑 FabricJS IText 并应用新样式(例如突出显示等...)

我想使用 fabric.js 编辑画布中文本中突出显示的字符,例如更改其颜色、字体、样式等. 就像这样http://fabricjs.com/test/misc/itext.html @user43250937嘿 嗯.我试过了,它有效!:D 谢谢.我尝试过下划线、粗体、斜体,但我在更改文本颜色时遇到问题,我尝试了 : //"cinput" 是颜色选择器的 id.addHandler( ..
发布时间:2021-12-21 08:35:11 前端开发