简介
splat-points-2d 是一个高效的 2D 手绘效果生成库。它能够根据输入的原始点云数据，生成类似于水洗画的效果。该库支持同步和异步调用，并且可以在浏览器和 Node.js 中使用。
安装
可以通过 npm 或者 yarn 安装该库：
npm install splat-points-2d yarn add splat-points-2d
如何使用
使用 splat-points-2d 常规分为以下几个部分：
1.导入库
const splatPoints = require('splat-points-2d');2.准备数据
须要将数据转换成 splatPoints 使用的数据结构，数据结构如下：
-- -------------------- ---- -------
-
-
-- ----
-- ----
------ - -- ---- -- ---- -- --- --
----- ----
--
-
-- ----
-- ----
------ - -- ---- -- ---- -- --- --
----- ----
--
---
-数据结构中的每个元素都包含了 x 和 y 坐标，每个坐标是一个数字，代表点的位置。color 表示笔画的颜色，必须由一个包含 r,g,b 三个属性的对象组成；size 表示笔画宽度，是一个具有数字值的浮点数，必需是正数。
3.调用 splatPoints
splatPoints 可以同步或者异步调用。
例如，下面的代码使用同步调用：
-- -------------------- ---- ------- ----- ------ - --------------------------------- ----- ------- - ------------------------ ----- ------ - ---- -- ---- ----- ------- - - ---------------- - -- -- -- -- -- - -- ---------- --- ---------------------- ---- -- ----- -------------- - ------------------- --------- ------------ - --------------------- ------------- - ---------------------- ------------------------------------ -- --- ----------------------------------
下面的代码使用异步调用：
-- -------------------- ---- -------
----- ------- - -
---------------- - -- -- -- -- -- - --
---------- ---
---------------------- ----
--
------------------- -------- -------- ------- ---------- -
-- ------- -
---------------------
- ---- -
----- ------ - ---------------------------------
----- ------- - ------------------------
------------ - ----------------
------------- - -----------------
------------------------------- -- ---
----------------------------------
-
---其中 options 对象包含了生成画面的参数。 backgroundColor 表示画布背景颜色，splatSize 表示点的半径，minimumAlphaThreshold 表示透明度阈值。
示例代码
下面是一个完整的 HTML 示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
---------------------- ------------
-------
------
--------
----- ----------- - ---------------------------
----- ------- - -
---------------- - -- -- -- -- -- - --
---------- ---
---------------------- ----
--
----- ------ - -
- -- ---- -- ---- ------ - -- ---- -- ---- -- --- -- ----- --- --
- -- ---- -- ---- ------ - -- ---- -- ---- -- --- -- ----- --- --
- -- ---- -- ---- ------ - -- ---- -- ---- -- --- -- ----- --- --
- -- ---- -- ---- ------ - -- ---- -- ---- -- --- -- ----- --- --
- -- ---- -- ---- ------ - -- ---- -- ---- -- --- -- ----- --- --
- -- ---- -- ---- ------ - -- ---- -- ---- -- --- -- ----- --- --
- -- --- -- ---- ------ - -- ---- -- ---- -- --- -- ----- --- --
--
------------------- -------- -------- ------- ---------- -
-- ------- -
---------------------
- ---- -
----- ------ - ---------------------------------
----- ------- - ------------------------
------------ - ----------------
------------- - -----------------
------------------------------- -- ---
----------------------------------
-
---
---------
-------
-------总结
splat-points-2d 是一个非常实用的前端库，可以用来生成高效的 2D 手绘效果。在使用该库时，可以根据自己的需求来调整参数，以获取最佳的效果。
使用示例：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a18ccae46eb111f08d