草庐IT

fabricjs

全部标签

javascript - 使用 fabric js 获取 Canvas 对象

我正在使用Fabric.js并在一个地方创建了一个织物Canvas对象。varx=newfabric.Canvas("mycanvas");现在在另一个地方,我想访问这个“x”不可用的对象。那么我怎样才能得到相同的织物Canvas对象。我不想更改x的范围或将x作为参数传递。另外,如何从fabriccanvas对象获取toDataURL? 最佳答案 假设mycanvas是Canvas元素的ID,您可以将对fabric对象的引用存储在Canvas元素本身上:varx=newfabric.Canvas("mycanvas");docume

javascript - 使用 fabric.js 绘制虚线

我想用fabric.js画一条虚线。I'vefoundIssue#603ongithubthatshouldimplementthisfeature.但是我没有找到任何示例代码,也无法让它与fabric.js1.2.1一起工作。它已经是fabric.js1.2.1的一部分,还是我必须直接从github上获取它并自己构建它?有人可以为我提供一个简单的示例来帮助我入门吗? 最佳答案 您要查找的属性是strokeDashArray,它对SVG属性进行编码stroke-dasharray.它需要一个描述破折号和间隙模式的数组,有关更多详细信

javascript - Fabric.js - 自由绘制矩形

我有以下不能正常工作的:varcanvas=newfabric.Canvas('canvas');canvas.observe('mouse:down',function(e){mousedown(e);});canvas.observe('mouse:move',function(e){mousemove(e);});canvas.observe('mouse:up',function(e){mouseup(e);});varstarted=false;varx=0;vary=0;/*Mousedown*/functionmousedown(e){varmouse=canvas.ge

javascript - Fabric.js 的撤消重做

我正在尝试向我的Fabric.jsCanvas添加撤消/重做功能。我的想法是有一个计数器来计算Canvas修改(现在它计算对象的添加)。我有一个状态数组,它将整个Canvas作为JSON推送到我的数组。然后我只想用记忆状态canvas.loadFromJSON(state[state.length-1+ctr],当用户点击撤消时,ctr将减一并将状态从数组中加载出来;当用户点击redo时,ctr将增加1并从数组中加载状态。当我用简单的数字体验到这种情况时,一切正常。使用真正的织物Canvas,我遇到了一些麻烦-->它实际上不起作用。我认为这取决于我的事件处理程序canvas.on({'

javascript - 缩放 fabric.js Canvas 对象

我的页面上有一个fabric.jsCanvas,我想对其进行响应。我的代码适用于缩放Canvas本身,但不适用于我在其上绘制的对象。任何的想法?我搜索过SO但找不到适合我的解决方案。varresizeCanvas;resizeCanvas=function(){varheight,ratio,width;ratio=800/1177;width=tmpl.$('.canvas-wrapper').width();height=width/ratio;canvas.setDimensions({width:width,height:height});};Meteor.setTimeout

javascript - 如何在 Fabric.js 中将对象动态缩放到 Canvas 大小

我想增加我的svg图像的高度和宽度,使其与Canvas的高度和宽度相同,以便它看起来像Canvas的背景图像。当我按下设置背景按钮时,一张svg图像将从我的目录设置为Canvas。我想动态地将此图像缩放到Canvas的高度和宽度。预期输出:IwantthisHTMLcanvas脚本$(document).ready(function(){varcanvas=newfabric.Canvas('c');varcolorSet="red";$("#svg3").click(function(){fabric.loadSVGFromURL('http://upload.wikimedia.o

javascript - 将圆 Angular 应用于路径/多边形

我正在为一个必须在几周内开始的项目收集一些信息。该项目包含一个基于浏览器的绘图工具,用户可以在其中添加预定义的形状或自己形成形状。形状必须是可选择的、可自由缩放的并且可以使用类似Illustrator的转换工具(handle)旋转。我们想到的预定义形状是:矩形、椭圆形、半椭圆形和(等腰)三Angular形。到目前为止一切顺利,要实现这一点,我正在考虑RaphaelJS或FabricJS,但是......每个形状(多边形/路径)都必须用特定的Angular半径绘制。并且缩放时必须保持圆Angular半径,因此不会发生失真。用户可以通过输入指定舍入。有一些障碍/问题:是否有一些统一的数学公

javascript - fabric js 字体粗细不工作

我正在使用此代码使用fabricjs在canvas中添加textbox,vartext='TypeTextHere';vartextSample=newfabric.Textbox(text,{left:getCardLeft()+100,top:getCardTop()+10,width:200,height:20,fontFamily:'Helvetica',fill:getColorPickerForegroundColor(),fontWeight:'',fontSize:parseInt('25'),originX:'center',hasRotatingPoint:true

javascript - 如何使用 Fabric.js 实现 Canvas 平移

我有一个Fabric.jsCanvas,我想实现软件包通常使用“手动”工具执行的全Canvas平移。当您按下鼠标按钮之一,然后在按住鼠标按钮的同时在Canvas上移动时,Canvas的可见部分会相应地发生变化。可以看到inthisvideo我想要实现的目标。为了实现这个功能我写了下面的代码:$(canvas.wrapperEl).on('mousemove',function(evt){if(evt.button==2){//2istherightmousebuttoncanvas.absolutePan({x:evt.clientX,y:evt.clientY});}});但它不起作

php - HTML5 canvas - 将保存的图像分享到社交媒体

感谢您花时间阅读这篇文章。我翻遍了这个论坛上无数的帖子,但仍然无法实现我想要的。我创建了一个用于保存用户绘图和图像的html5Canvas。当用户按下发布时,他/她将收到一个弹出框(灯箱)的提示预览她的图像,可以选择使用Addthis.com.在社交网络上分享图像这就是我到目前为止所取得的成就。1.在我的Canvas中,我有一个名为#btnPreview的按钮$("#btnPreview").click(function(event){canvas.deactivateAll();varstrDataURI=canvas.toDataURL("png");varproporcao=1;