首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Fabric.js 使用自定义字体

这次就讲讲 Fabric.js 中创建文本时怎么使用自定义字体、项目运行时怎么修改字体、以及推荐一个精简字体库的工具。...学习本文前,你必须有一点 Fabric.js 的基础,如果没了解过 Fabric.js 可以阅读一下 《Fabric.js 从入门到膨胀》 创建文本时设置字体 Fabric.js 中使用自定义字体库时...创建文本时就设置字体,需要做以下几步: CSS 里引入字体。 使用 Fabric.js 创建画布。 等字体加载完成后再设置文本字体。 将文本添加到画布中。...本例中,我使用 IText 创建文本创建时通过它的 fontFamily 属性就可以设置自定义字体。...创建画布。 等字体加载完成后再设置文本字体。 将文本添加到画布中。 修改字体前,先获取要修改的文本元素。 使用 set 方法设置文本的 fontFamily 属性。 刷新画布

49520
您找到你想要的搜索结果了吗?
是的
没有找到

FabricJS gotchasFabricJS陷阱

Objects are no more selectable – setCoords(对象不再是可选择的-setCoords) Fabric包含两组坐标以快速知道物体画布上的位置。...除非你没有精度问题的情况下进行处理,否则这基本是最好的。 举一个例子,可以使用“ 0.0151”的比例将非常大的图像缩小为较小的尺寸。...) 有时,原型概念的快速证明中,人们使用文本输入来更改fabric对象的属性。...Fabric文档指出top,left,scaleX,angle其他属性需要数字作为值。 文本输入返回字符串。...当将字符串转换为数字时,FabricJS不会检查类型也不进行转换,这是由于某些代码的副作用,而不是要依赖的功能。 将值分配给需要数字的属性之前,请使用parseIntparseFloat。

1.1K10

Fabric.js 从入门到________

包括: 画布的基本操作 基础图形绘制方法(矩形、圆形、三角形、椭圆、多边形、线段等) 图片滤镜的使用 文本文本框 动画 分组打散分组 基础事件 自由绘画 裁剪 序列化反序列化 …… 除此之外,还会讲一些进阶一点的操作...只有图片完全加载后再添加到画布上才能展示出来。 使用该方法,如果不想在画布外展示图片,需要使用 display: none; 把图片隐藏起来。...---- 缩放和平移画布 本节案例在线预览 - 平移缩放画布 本节代码仓库 缩放画布 以原点为基准缩放画布 要缩放画布,其实是监听鼠标事件。...如需移动,立刻转换画布视图模式 将画布移动到 鼠标xy轴坐标 。 鼠标松开 mouse:up 把画布定格鼠标松开的坐标。...Fabric.js 提供了 toJSON toObject 两个方法,把画布及内容转换成 JSON 。 因为本例输出的是一个空画布,所以输出内容里的 objects 字段是一个空数组。

12.6K50

Fabric.js IText 手动设置斜体 🎋

这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情 ---- 本文简介 点赞 + 关注 + 收藏 = 学会了 不管是文本编辑器还是Word里,都有“斜体”功能。...而 Fabric.js 也不例外。本文主要讲解 Fabric.js 中使用 IText 创建的文本进行斜体设置。...其中包括: 创建文字时就设置斜体 让用户手动设置斜体 初始化画布 初始化画布是必须的,之后讲解的内容都会基于这小节的代码进行开发。...world') // 创建文本 canvas.add(iText) // 将文本添加进画布中 复制代码 初始化的代码非常简单,如果你对上面的代码不太理解的话可以先看看 《Fabric.js...使用 styles 可以逐行逐字进行设置。“e” 位于第1行第2个字符,而计算行列是从下标0 开始的,所以 “e” 的位置是 0-1 。

3.2K20

从零开发一款图片编辑器Mitu-Dooring

如果大家对 fabric 这个库不太熟悉也不用担心,我会通过具体功能的实现来带大家熟悉这个库。 介绍下面的内容之前我们先安装一下 fabric ,然后初始化一个画布。...,并在画布中插入了一段可编辑可拖拽的文本,如下: image.png 图形库设计 作为一款图片编辑器,为了提高使用的灵活性我们还需要提供一些基础图形方便我们设计图片,所以我在编辑器里添加了图形库:...我们图片库中点击任意一个元素即可将其插入画布,这块是利用 fabric 的 add 方法,当然 fabric 也内制了很多基本图形,我们可以文档中参考一下。...下载的效果如下: image.png 模版保存实现 设计图片编辑器的过程中我们也要考虑保存用户的资产,比如做的比较好的图片可以保存为模版,以便下次复用,所以我在编辑器里还实现的简单的模版保存使用的功能...fabric 提供了序列化画布的方法 toDatalessJSON(),我们保存模版的时候只要把序列化后的 json 图片一起保存即可,这里方便处理我暂时存在 localStorage 中,大家也可以使用大容量本地化存储方案

1.1K40

Fabric.js 更换图片的3种方法(包括更换分组内的图片,以及存在缓存的情况)

环境版本 Chrome浏览器版本:96.0.4664.45 Fabric.js版本:4.6.0 我是原生环境下开发的,同时也提供了一份 Vue3 环境下开发的代码(文末有链接)。...动手操作 接下来有3个案例,使用了2张图片 Agumon.png Bhikkhu.png,图片是 iconfont 网站上找到的。 如果需要使用本案例的图片,可以文末提供的仓库中获取。...因为本例中,画布里只有一个元素,用 getObjects() 获取到的数组第一个元素就是图片咯 const img = canvas.getObjects()[0] // 使用 setSrc...如果画布上有多个图形图片,你可能需要在创建图片的时候加一些自定义属性进去判断。 使用 fabric.getObjects().find() 去搜索就行了。 find() 就是数组的原始方法。...代码仓库 原生方式实现 更改图片 Vue3中使用Fabric实现 更改图片

4.6K40

Fabric.js 拖放元素进画布

解4:移动画布Fabric.js 拖拽平移画布》 里讲解过。 解5:画布的左上角不一定在body的左上角,也就是鼠标当前位置可能画布对应的坐标不一样,需要通过加减法计算一下。...解6:Fabric.js 提供了一个方法可以将鼠标当前坐标转换为画布对应的真实坐标,这个方法叫 restorePointerVpt 。 动手 我分几个步骤慢慢实现上述功能。...按住 alt 后,使用鼠标画布上可以拖拽画布画布上滚动鼠标滚轮可以缩放画布。 左侧的元素列表也将 draggable 属性设置为 true,元素具备拖拽功能了。...(xy坐标) 松开鼠标时,需要计算鼠标画布的坐标。...这里的坐标是指画布页面中的位置转换出来的坐标,而且还要计算画布拖拽缩放过的情况。

3.1K30

Fabric.js 将本地图像上传到画布背景

---- 本文介绍 我使用 Fabric.js 的版本是 4.6.0。 这次要实现的效果是:本地上传一张图片,然后渲染到 canvas 里(当做背景图)。...实现逻辑: 定义好 上传按钮 画布(HTML部分); 初始化画布; 点击上传按钮 获取图片地址(这里需要处理一下安全策略的问题); 拿到图片路径使用 canvas.setBackgroundImage...} ) element-plus 里的操作 我使用了 vue3 + element-plus 。...正式的项目开发中,上面两种情况出现的概率应该不多(除非你的后端伙伴是个懒人) 先说说上面两种情况存在的问题: 图片路径是本地地址,保存到服务器是没意义的。...正式项目中,你可能还要考虑到背景图的大小画布大小不匹配问题。 你可以参考 《Fabric.js 从入门到膨胀》 中 “拉伸背景图” 这小节。

2.6K30

Fabric.js 缩放画布 🍬

使用 canvas 开发的项目,滚轮缩放画布的需求应该不算少数,比如地图。 Fabric.js 也提供了缩放画布的功能,本文主要讲解设置画布大小的几种方法。 动手实现 动手前先查查文档。...我把本文相关的文档放在这 mouse:wheel:滚轮事件 getZoom:获取画布当前缩放级别 setZoom:设置画布缩放级别 zoomToPoint:设置画布缩放比例及缩放原点 其中 setZoom...起步 使用缩放功能之前,先初始化一下画布。 我还会在画布上设置一个背景图,便于观察。... // 初始化画布 canvas = new fabric.Canvas('canvasBox') // 添加背景图 // 第1个参数:图片路径 // 第2个参数...(以左上角为原点) 以左上角为原点进行缩放画布,推荐使用 getZoom setZoom 组合。

5.4K30

Fabric.js 激活输入框🎈

再次点的方法是使用 JS 获取输入框元素,再调用 focus 事件选中输入框。 Fabric.js 中,IText 组件也提供了类似的方法。...实操 Fabric.js 的 IText 是一个可编辑文本框,可以项目运行时输入文字,功能其实 HTML 的 input 差不多,都是可以让用户输入。...默认情况 Fabric.js 中,如果在创建 IText 时没有添加文字,画布上你是很难用肉眼观察出你的输入框在哪的。...(iText) // 将输入框添加到画布中 复制代码 此时画布输入框是被创建出来了,但凭肉眼是很难找到输入框在哪。...使用 Fabric.js 最主要是多看文档,然后把多个 api 结合起来使用,就能创造出多种效果~ 代码仓库 ⭐IText 激活输入框

5.9K10

基于Vue + fabric.js的图片标注组件搭建

fabric.js介绍fabric是基于canvas进行的api封装,可以实现绘制矩形、圆、椭圆、文本等一些基础图形,同时支持画笔自定义图形,fabric的优点在于它对生成的canvas画布进行了良好的封装...,包括对画布以及画布上的对象进行调整,监听画布对象的各种事件,使得画布交互逻辑变得简单易上手。...fabric的官网详细地列出了fabric的各种参数以及api,由于Fabric.js是国外的框架,文档为全英文,且相关示例少,所以建议配合源码使用功能构建画布此处参考:https://github.com...}}fabricCanvas事件主要是初始化fabric,并将图片设置成画布的背景图片,以便后续画布上添加标注框 <...来对画布进行放大缩小拖拽操作放大缩小放大2.

4.6K30

Fabric.js 使用纯色遮挡画布(前景色)

如果你的项目使用fabric.js ,可以直接使用 fabric.js 提供的方法去遮盖画布,而且用法非常简单。...Should be set via fabric.StaticCanvas#setOverlayColor 使用这个属性可以画布顶层覆盖一层颜色,可以覆盖画布内所有背景元素。...移除覆盖层 某些应用场景(比如游戏)需要提前把画布加载出来,但用户某一时刻还没权限查看画布内容时,就可以使用 overlayColor 将画布遮盖起来。...更灵活的方法 setOverlayColor 除了创建画布时设置 overlayColor 外,还可以使用 setOverlayColor() 方法某个时刻设置画布遮罩颜色。.../images/bg4.png' }, canvas.renderAll.bind(canvas) ) 第一个参数是对象, source 里传入图片路径即可。

1.4K20

Fabric.js 上划线、中划线(删除线)、下划线🎭

HTML 也好,Word 也好,基本都有下划线删除线(中划线)。 Fabric.js 作为一个老牌 canvas 库,当然也提供中划线下划线的配置啦,除此之外还提供了上划线的配置。...\n\n\n 本文要讲解的就是这3种装饰线 fabric.js 中的使用方法。除了初始化配置外,还支持项目运行时,让用户动态配置。本文案例使用了 IText ,该组件支持编辑功能。...换行的方法是文本内容里使用\n做换行。 动态设置 除了初始化时可以设置装饰线外,Fabric.js 也提供了在运行时用户手动设置。不过代码会稍微复杂一点。...其实动态设置上划线、中划线下划线的操作都是一样的,唯一要变的就是属性名。 我以中划线为例,之后上划线下划线只需改个属性名。.../script/fabric.5.2.1.js"> const canvas = new fabric.Canvas('c') // 初始化画布 const

2.4K20

Fabric.js 圆形笔刷

本文介绍 Fabric.js 的圆形笔刷功能。 圆形笔刷是作用在 “自由绘制” 的画笔之上的。从名字就可以看出,这个笔刷会用一个个圆形来填充绘制的路径。...看图会更直观 Fabric.js 会使用不同频率、大小、颜色深浅来绘制出上图效果。 本文使用 Fabric.js 5.2.1 常用配置 要做出上图的效果,首先需要将画布设置成 绘画模式 。...初始化画布 首先需要初始化画布,之后的每个属性方法讲解,都会基于这段代码。...要将画布设置成 绘画模式 ,需要将 isDrawingMode 设置为 true 。...鼠标移动事件中还能添加更多方法,比如在绘制的基础上,附近再画多一条线 // 省略初始化代码 circleBrush.onMouseMove = function (pointer, e) {

2.2K10

Github 2.9 万 Star !这款绘图神器千万别错过

Fabric.js 为 Canvas 提供所缺少的对象模型, svg parser, 交互一整套其他不可或缺的工具。...如果你需要用 canvas 做特效,那我推荐你使用 Fabric.js ,因为 Fabric.js 语法更加简单易用,而且还提供了很多交互类的 api。 Fabric.js能做什么?...Canvas上创建、填充图形(包括图片、文字、规则图形复杂路径组成图形)。 给图形填充渐变颜色。 组合图形(包括组合图形、图形文字、图片等)。 设置图形动画集用户交互。...({ top: 50, left: 300, width: 100, height: 100, fill: 'yellow' }); 2.6 添加到画布中 # 可交互的画布 var canvas...= new fabric.Canvas('canvas'); # 不可交互的画布 var canvas = new fabric.Canvas('canvas'); 效果图 更多demo效果 最后

1K40
领券