写点什么

Fabric.js

0 人感兴趣 · 15 次引用

  • 最新
  • 推荐
https://static001.geekbang.org/infoq/4c/4c6c194560c563d68cb29a2aa2a27a26.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

我的开源项目与开源经历分享

一位93年的前端开发者从一个开源门外汉变成了一个开源发起者,项目已经1K+ Star,分享一下自己的开源项目和开源历程,供大家参考。

https://static001.geekbang.org/infoq/13/1319abd7261e4b110159881b67b831ed.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

fabric.js 开发图片编辑器可以实现哪些功能?多图

使用fabric.js开发了图片编辑器,用文字加动图的形式直观的分享出来,帮助做功能参考,项目已开源。

https://static001.geekbang.org/infoq/d9/d9981e7db44e6f995d8c0b883a1d302e.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

fabric.js 开发图片编辑器的细节实现

如何用fabric.js快速开发一款编辑器,以及开发的细节优化,代码已经开源 600+star。

https://static001.geekbang.org/infoq/ac/acc01ecb0f05c82de6b220381235a701.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

用了 Fabric.js 后突然想到了...

用户头像
为自己带盐
2022-09-09

我们公司有一个在线导播台的产品,是利用腾讯云音视频提供的接口自行封装的一个在线推流工具。

https://static001.geekbang.org/infoq/c0/c07d01d2464bcb36e45681ef42c0278d.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js IText 手动设置斜体 🎋

用户头像
德育处主任
2022-06-22

🎋 不管是在富文本编辑器还是在Word里,都有“斜体”功能。而 Fabric.js 也不例外。本文主要讲解在 Fabric.js 中使用 IText 创建的文本进行斜体设置。

https://static001.geekbang.org/infoq/d2/d2702e0f934f30c7dc526ebe41b37432.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 控制元素层级 👑

用户头像
德育处主任
2022-06-20

👑元素数量多了,难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。

https://static001.geekbang.org/infoq/59/59e71885475b0a6c3eb5f410cbbfbdff.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 动态设置字号大小 🎄

用户头像
德育处主任
2022-06-11

🎄 本文讲解在使用Fabric.js创建可编辑文本后,支持用户动态修改全局或者被选中字符的字号大小。该案例适合做在线ps等应用🎄

https://static001.geekbang.org/infoq/7e/7e1e436a41d0b71fe1bc8a962c55423b.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 元素被选中时保持原有层级🥁

用户头像
德育处主任
2022-06-08

🥁如果希望被操作的对象一直保持在原有的层级,这样操作起来某些情况下会更直观。那么你可以在初始化画布时将 preserveObjectStacking设为true🥁

https://static001.geekbang.org/infoq/f8/f81b827073356d929ab8fc018da3ff39.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 锁定背景图,不受缩放和拖拽的影响🎃

用户头像
德育处主任
2022-06-06

🎃 如果你的项目有画布拖拽、缩放等功能,而且你不希望背景图跟随拖拽或缩放,那么你可以将 backgroundVpt 设置为 false

https://static001.geekbang.org/infoq/dd/dd8ace27e3bf9f2e7436589a1e4bd300.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 居中元素 🎗️

用户头像
德育处主任
2022-06-05

🎗️ 使用 fabric.js 时,难免需要将元素进行居中处理。本文将详细讲解如何居中元素到视窗和画布 🎗️

https://static001.geekbang.org/infoq/ca/caea4f1a768d85fd2d314093798ab548.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 缩放画布 🍬

用户头像
德育处主任
2022-06-04

使用 canvas 开发的项目,滚轮缩放画布的需求应该不算少数,比如地图。 Fabric.js 也提供了缩放画布的功能,本文主要讲解设置画布大小的几种方法。

https://static001.geekbang.org/infoq/99/992aab9d469500b341fd34130212166d.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 上标和下标的使用偏方🔥

用户头像
德育处主任
2022-06-03

在 Fabric.js 中,不管是 Text、IText、Textbox ,设置上标和下标的方法都是差不多的。本文讲一个使用偏方,也能实现上标和下标的效果🔥

https://static001.geekbang.org/infoq/f6/f6dfe85d0e8a3d0ad4a8d5ccd206802d.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Fabric.js 圆形笔刷

用户头像
德育处主任
2022-06-01

还记得小时候电脑课经常玩的金山画王吗?里面提供了很多仿真画笔。这次我们就做一个简化(阉割)版,用 Fabric.js 提供的能力画画

https://static001.geekbang.org/infoq/5e/5efd1593cb0cb6b2795634310151a233.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

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

用户头像
德育处主任
2022-01-26

本文分别从原生和vue的环境下操作。上传图片到canvas里渲染出来,借助Fabric.js强大的能力去实现。

Fabric.js_Fabric.js技术文章_InfoQ写作社区