fabricjs相关内容

Fabric.js 画布上的动画 GIF

我正在从事一个项目,我被要求在 fabric.js 画布上支持动画 GIF. 根据 https://github.com/kangax/fabric.js/issues/560,我遵循了使用fabric.util.requestAnimFrame 定期渲染的建议.使用此方法可以很好地呈现视频,但 GIF 似乎没有更新. var canvas = new fabric.StaticCanva ..
发布时间:2021-11-10 05:17:46 其他开发

问题 Fabric js 为形状和背景角度应用背景颜色

我在fabricjs 中遇到一个问题,问题是 我的当前代码有默认背景,我可以更改背景颜色 如果我放置任何对象或文本,如果我想将该对象的背景颜色更改为透明度 我正在尝试更改形状颜色,但背景颜色正在更改. 实际上我发现下面的 html 有什么问题我有 props.canvasFill 我认为应该有两个参数,因为如果你看到我的 ts 代码 这是我的 HTML **** 这是我目前在 ..
发布时间:2021-11-08 23:49:00 其他开发

如何将可编辑的文本和图像添加到threejs

所以我正在尝试使用fabric js将新图像和文本作为3d对象的纹理添加到我的3d配置器中,我使用此代码作为代码库https://github.com/devramkumardnagarajan/3d-Tshirt-design 和此面料 js 的代码 https://codepen.io/ricardcreagia/pen/EdEGod,这就是我所做的 var texture = new ..
发布时间:2021-09-07 18:46:46 其他开发

使用未分组的 Fabric JS 加载 SVG

谁能告诉我如何使用未分组的fabric js加载SVG文件.使用以下代码加载 SVG 文件,但它显示为单个对象. $(函数(){var canvas = this.__canvas = new fabric.Canvas('c');fa ..
发布时间:2021-09-01 19:18:03 其他开发

在fabric js中缩放时如何保持Rect的圆角

我使用的是 Fabric js 版本 1.7.22. 原始对象: 当前结果: 预期结果: 解决方案 一种方法是监视 scaling 事件并将 Rect 的缩放重置为 1,修改其width 和 height 代替: const canvas = new fabric.Canvas('c')const rect = new fabric.Rect({左:10,前10名, ..
发布时间:2021-07-10 19:48:08 其他开发

使用fabric.js渲染和操作node.js中的服务器端画布

我正在尝试将fabric.js(v0.9.21,通过ubuntu 12.04上的npm安装)与node.js一起使用,以在服务器上渲染画布(以后可以在没有客户端交互的情况下对其进行操作和扩展).为了进行实验,我在客户端上创建了一个简单的画布,然后使用 canvas.toJSON()方法将其导出到JSON.当我尝试仅使用JSON重新加载画布时,它的效果很好(利用 canvas.loadFromJSO ..
发布时间:2021-05-15 18:33:02 其他开发

FabricJS canvas drawImage不显示图像

尝试创建一个自定义类,该类将在Fabric矩形的左上角显示图像. 扩展结构类并调用 ctx.drawImage 不会显示任何内容. var CustomRect = fabric.util.createClass(fabric.Rect,{类型:"labeledRect",初始化:功能(选项){选项||(选项= {});const image = new Image();image.sr ..
发布时间:2021-05-14 20:20:56 其他开发

动态SVG网站图示?

我有一个图标作为SVG.我想将其作为图标图标使用不同的颜色. 由于没有用于SVG元素的toDataUrl(),因此我看不到不涉及服务器的解决方案. 对客户端解决方案有什么想法吗? 解决方案 fabric.js 支持将SVG元素渲染为 canvas 元素. ..
发布时间:2021-05-06 20:31:20 其他开发

如何在FabricJS中编写卷积过滤器以进行边缘检测

我想在Fabricjs中编写卷积过滤器以进行边缘检测,但是矩阵不起作用. 这是矩阵(从 http://homepages.inf.ed.ac.uk/rbf/HIPR2/sobel.htm ):新的fabric.Image.filters.Convolute({//边缘检测矩阵:[[-1,0,1,-2,0,2,-1,0,1],[1、2、10,0,0,-1,-2,1]]}) 此处是小提琴 ..
发布时间:2021-05-06 20:05:29 其他开发

Fabric.js对象缓存:缩放图像内容,保持图像边框

我尝试使用fabricjs实现图像缩放.我的要求:在不更改边框大小的情况下缩放图像的内容(不缩放图像). 这是我的代码: jsfiddle.net/63twbox/11/ 按照这种方式,我需要将rect的objectCaching设置为false.但这会在运动图像时造成严重的性能问题.因此,我在缩放模式下将objectCaching设置为false,而在其他模式下将true设置为tru ..
发布时间:2021-05-06 20:05:26 其他开发

使用Fabric.js旋转对象后重新绘制边界框边框

我正在使用Fabric.js(版本1.7.19)在画布上绘制.我有一个“旋转"按钮,可将活动对象旋转90度.旋转效果很好,但是对象边界框的边框不会更改以反映旋转的对象,除了看起来很奇怪以外,这意味着我无法正确选择对象. ..
发布时间:2021-05-06 20:05:23 其他开发

由于升级fabric.js无法在组中绘制线

自从更新fabric.js库以来,我们一直无法将线绘制到组中,然后将其添加到画布上. 我用不同版本的fabirc.js创建了2个相同的小提琴. 正在使用:1.6.2 http://jsfiddle.net/b0Lbovs5/ 最新版本: http://jsfiddle.net/hukpuc30/ /**/ var gridLayer = null;var gridSize ..
发布时间:2021-05-06 20:05:20 其他开发

如何对文档实施黑白滤镜

如何使用fabricjs或任何其他JavaScript库对文档应用黑白过滤器以获得以下结果? 输入图片: 预期结果: 输入图片: 预期结果: 解决方案 以下是解决方案:http://jsfiddle.net/qasLmxvh/1/ var canvas = new fabric.Canvas('c');$('.select_image').change(func ..
发布时间:2021-05-06 20:05:16 其他开发

如何强制画布FabricJS刷新

我当前正在使用fabricJS(版本1.4.0 )画布,并且我在画布上手动添加了100个对象,但是对象仅在我单击画布上的任何位置时才会出现,是否有一种方法可以强制画布刷新自身?如果可以以某种方式提供帮助,这是我的一种情况. ....initComplete:函数(设置,json){让客户= JSON;if(clients.length!== 0){//clients是一个长度为100的数组为( ..
发布时间:2021-05-06 20:05:13 其他开发

如何从多项选择的activeObjects []元素中获取原始坐标?

我正在使用Fabricjs编码网页.首先,我在画布上绘制了一些圆圈,然后允许用户选择一个或多个圆圈.我写了一个selection:created处理程序,该处理程序创建一个表单并打印该表单中每个选定对象的坐标.问题在于这些坐标与我创建圆时设置的坐标完全不同.但是,只有当用户选择两个或多个圆圈时,这种情况才会发生. 我基本上要做的是:调用返回ActiveObjects []数组的getActi ..
发布时间:2021-05-06 20:05:10 其他开发

带有乘法器的Fabric toDataUrl无法按预期工作

在我的代码中,我创建了使用织物形状裁剪图像的方法.我已经使用stackoverflow答案来实现这一目标.使用此方法后,不知何故我无法使用默认的布料画布渲染方法来渲染画布. var img01URL ='https://www.google.com/images/srpr/logo4w.png';var img02URL ='http://fabricjs.com/lib/pug.jpg' ..
发布时间:2021-05-06 20:05:03 其他开发

修改折线

如果我想在现有折线上添加一条额外的线,是否应该先从画布上删除该现有折线,修改点矩阵,然后添加新的折线?还是可以更改现有的折线,例如更改文本对象的文本? 解决方案 您可以删除整条折线并添加一条新折线,否则需要计算尺寸(left,top和pathoffset)并将其设置为折线. 演示 var canvas = new fabric.Canvas('c');var points = [ ..
发布时间:2021-05-06 20:04:59 其他开发

fabric.js 3.6-更改分组对象后,分组的边界框不会更新

fabric.js存在的问题似乎很简单,但是我一直在寻找一个没有运气的解决方案,所以我在这里. 我创建了一个简单的组来绘制箭头,该箭头由线对象和放置在其端点处的旋转三角形组成.效果很好,但是当我动态更新线条的笔触宽度和三角形的宽度/高度时,组的边界框不会更新以匹配新尺寸.这是结果的图像: 这是现场演示.只需拖动滑块以更改笔划宽度和三角形大小,您就会看到问题. let canva ..
发布时间:2021-05-06 20:04:53 其他开发