fabricjs相关内容

由于升级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 其他开发

如何在Fabric中为画线设置动画

要在清晰的Canvas中为画线设置动画不是很困难,但是我不明白在Fabric中是如何做到的.例如,我得到了这一行: var L = new fabric.Line([50,100,200,200],{左:170,最高:150,中风:“红色"}) ,我需要它的结尾之一开始继续到下一点(就像用铅笔画线一样).我知道这里有一个'animate'函数,但是使用 L.animate('left' ..
发布时间:2021-05-06 20:04:50 前端开发

FabricJS iText宽度和高度

是否可以设置iText对象的宽度和高度?创建对象时,如果设置宽度和高度,则不会执行任何操作.我需要的是将边框在画布上固定为可编辑区域的固定大小,我已经扩展了iText类以允许进行单个字符编辑,但是我似乎无法解决如何将框的大小设置为固定大小,并允许在其中进行内容编辑.请记住,文本框无法移动或缩放,它是静态的. 解决方案 为时已晚,但其他人可能正在寻找答案.首先,如果要提供固定宽度&,则可以使 ..
发布时间:2021-05-06 20:04:47 其他开发

移动后的fabricjs线坐标

小提琴- jsfiddle 排序: 在坐标(x1 = 50,y1 = 50,x2 = 450,y2 = 50)处画线 检查坐标y1.y1 = 50 将y轴上的线移动50个像素. 检查坐标y1.左y1 = 50 ???这是为什么?以及如何获得真实的坐标? var canvas = new fabric.Canvas('c');var line = new fabric.Li ..
发布时间:2021-05-06 20:04:44 其他开发

某些字体的字符宽度计算错误,这会使自动缩进

这是选择时的最后一个字符位置.看起来像Lobster1.3这样可以自动缩进的字体会使某些字符宽度计算错误 解决方案 在创建使用该字体的fabricObject之前,必须确保字体已正确加载到画布上,如果没有,fabricjs将创建一个必须宽度的字符缓存手动删除以获得好的. var jsondata = {“对象":[{"type":“文本框","originX":“左","origi ..
发布时间:2021-05-06 20:04:37 其他开发

fabricJs自定义对象不会从JSON呈现

fabricJS版本2.2.3 测试 jsFiddle 我正在尝试使用LabeledRect子类,但是我的问题是,每当我尝试从JSON加载它时,它都不会呈现,并且在控制台中也没有出现错误.参见下面的小提琴. 如何正确渲染?我认为我的问题出在fromObject函数中,但是我不知道在哪里. /***用于错误报告的fabric.js模板**请更新jsfiddle的名称(请参阅F ..
发布时间:2021-05-06 20:04:34 其他开发

如何在Fabric.js组内获取对象的左上角

如何获取组内三角形相对于画布的相对位置(顶部,左侧)作为波纹管图像? 我遵循了以下主题: 解决方案 工作示例,您可以在这里找到: http://jsfiddle.net/mmalex/2rsevdLa/ 嵌套对象=>等等...//为简单起见,请忽略画布的缩放和平移var mTotal = fabric.util.multiplyTransformMatrices(mGroup, ..
发布时间:2021-05-06 20:04:30 其他开发

fabric.js以编程方式停止对象拖动

在某些情况下,在我的mouse:down事件侦听器中,我想停用用户刚刚使用mouse:down激活的对象.换句话说,在某些情况下,当用户尝试拖动对象时,我想执行一些代码并防止拖动. 简单地打电话 fabric.deactivateAll(); 将取消选择对象(对象控件消失),但拖动功能不会中断. 我试图: fabric.fire('mouse:up'); 模拟用户放开对 ..
发布时间:2021-05-06 20:04:27 前端开发

如何在FabricJs中设置相对位置(oCoords)?

我在fabricJs中有一个Text.我上下左右.这会将aCoords正确设置为这些值.但是,oCoords不匹配.并且“文本"未显示在正确的位置. 我怀疑我需要以某种方式设置为oCoords.以便在画布上的右侧像素坐标处(顶部和左侧)显示文本. 解决方案 aCoords和oCoords是两个不同的东西,不应同步. 在您的评论中,您谈论的是缩放画布. 顶部和左侧是2个绝对 ..
发布时间:2021-05-06 20:04:20 其他开发