摘要:
本文简介 点赞 + 关注 + 收藏 = 学会了 当你要复制一个 fabric 的元素时,你考虑到的是什么?是深拷贝当前选中对象再添加到画布中? 其实,fabric.js 提供了一个克隆方法,在 fabric.js 官网的案例里也有这个demo:Fabric.js demos · Copy and P 阅读全文
摘要:
本文简介 带尬猴,我是德育处主任 canvas 绘图时会根据当前状态来绘制。很多的 canvas 库都利用到这一特性。比如 p5.js 利用了 canvas 状态特性衍生出 push 和 pop 函数实现状态隔离(既然提到了,下一篇就讲这个)。 有兴趣了解 p5.js 的工友推荐阅读 《p5.js光 阅读全文
摘要:
本文简介 带尬猴,我嗨德育处主任 不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式? 如果你也遇到同样的问题的话,可以尝试使用本文的方法。 是否需要重新绘制 我先举个例子。 <canvas id="c" style="border: 1p 阅读全文
摘要:
本文简介 带尬猴,我嗨德育处主任 前面写了几篇 p5.js 文章 都还没涉及到3D图形,但其实 p5.js 是提供了基础的3D图形的。 本文就从最简单的立方体讲起,并做几个小demo和各位工友一起掌握立方体的用法。 立方体的基础用法 在 p5.js 里使用 box() 方法可以创建立方体。 基础语法 阅读全文
摘要:
本文简介 带尬猴,我是德育处主任 原生 canvas 提供了 save() 和 restore() 两个方法去管理画布状态。p5.js 作为一个 canvas 库,也理所当然的提供了状态管理的方法。在 p5.js 里这两个方法叫 push() 和 pop()。 本文主要讲解 p5.js 的 push 阅读全文
摘要:
本文简介 带尬猴,我嗨德育处主任 p5.js 为开发者提供了很多有用的方法,这些方法实现起来可能不难,但却非常实用,能大大减少我们的开发时间。 本文将通过举例说明的方式来讲解 映射 map() 方法。 什么是映射 从 p5.js 文档 中可以看到对映射的说明 说明:从一个范围内映射一个数字去另一个范 阅读全文
摘要:
本文简介 带尬猴,我嗨德育处主任 在 canvas 里,变换是基础功能。很多基于 canvas 封装的库都有这功能,比如 《Fabric.js 变换视窗》。 变换是针对画布进行全局调整的一种能力,它可以对画布进行全局移动、缩放、旋转等操作。 p5.js 同样具备变换功能,而且还封装了很多方便的函数去 阅读全文
摘要:
本文简介 带尬猴,我是德育处主任 当今的Web开发中,图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎,已经成为了许多开发者的首选(我吹的)。本文将为工友们介绍PixiJS的基础知识和使用方法,希望可以和工友们快速光速入门,掌握 Pixi.js 阅读全文
摘要:
本文简介 戴尬猴,我是德育处主任 欢迎来到《物理世界的互动之旅:Matter.js入门指南》。 本文将带您探索 Matter.js,一个强大而易于使用的 JavaScript 物理引擎库。 我将介绍 Matter.js 的基本概念,包括引擎、世界、物体和约束等。 本文还提供丰富的代码示例,帮助各位工 阅读全文
摘要:
本文简介 带尬猴,我是德育处主任 虽然 Fabric.js 提供的基础功能已经很丰富了,但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。掌握创建自定义控件这个功能,能够创建更加精美和实用的图形应用程序,提高用户体验和用户满意度。 尽管 Fabric.js 的文档很一般,但 demo 还挺 阅读全文