lazy-brush - smooth drawing with a mouse, finger 或者 any pointing device

Demo - NPM - CodePen 示例

演示应用还使用
catenary-curve 画出小
“rope” between mouse 并且 brush.

该库提供了实现“懒惰画笔”所需的数学运算。
它采用鼠标/指针的半径和 {x，y} 坐标并计算
画笔的位置。

画笔只有在指针位于
刷。使用这种技术，可以自由地绘制平滑的线条和曲线
只需鼠标或手指即可。

运作方式

更新指针位置时，到画笔的距离为
计算。如果此距离大于定义的半径，则画笔将
被感动 distance - radius 指针所在方向的像素。

使用说明

lazy-brush 在 npm 上，所以你可以用你最喜欢的包管理器来安装它。

1
npm install --save lazy-brush

lazy-brush 可以轻松添加到任何画布绘图场景中。它的作用就像一个
用户输入和绘图之间的“代理”。

它导出一个 LazyBrush 类。创建类的单个实例：

1
2
3
4
5
const lazy = new LazyBrush({
  radius: 30,
  enabled: true,
  initialPoint: { x: 0, y: 0 }
})

您现在可以使用 update() 方法，只要鼠标的位置（或
触摸）更改：

1
2
3
4
5
6
7
8
9
// Move mouse 20 pixels to the right.
lazy.update({ x: 20, y: 0 })
// Brush is not moved, because 20 is less than the radius (30).
console.log(lazy.getBrushCoordinates()) // { x: 0, y: 0 }
 
// Move mouse 40 pixels to the right.
lazy.update({ x: 40, y: 0 })
// Brush is now moved by 10 pixels because 40 (mouse X) - 30 (radius) = 10.
console.log(lazy.getBrushCoordinates()) // { x: 10, y: 0 }

该函数返回一个布尔值，以指示任何值（brush 或
指针）已更改。这可用于防止不必要的画布
重 绘。

如果您需要知道画笔的位置是否发生了变化，您可以得到
布尔 via LazyBrush.brushHasMoved().使用此信息来决定您是否
需要在画布上重新绘制画笔。

要获取当前画笔坐标，请使用 LazyBrush.getBrushCoordinates().
对于指针坐标，请使用 LazyBrush.getPointerCoordinates().这将
返回一个 Point 具有 x 和 y 属性的对象。

功能 getBrush() and getPointer() 将返回一个LazyPoint哪
有一些附加功能，例如 getDistanceTo, getAngleTo or equalsTo.

有摩擦

您还可以在调用时传递摩擦值（介于 0 和 1 之间的数字） update():

1
lazy.update({ x: 40, y: 0 }, { friction: 0.5 })

这将降低画笔向指针移动的速度。一个
值为 0 表示“无摩擦”，这与不传递值相同。1
意思是“无一摩擦”，刷子根本不会移动。

您可以定义一个常量值或使其动态，例如使用压力
触摸事件中的值。

更新这两个值

您还可以同时更新指针和画笔坐标：

1
lazy.update({ x: 40, y: 0 }, { both: true })

这可以在支持触摸事件时使用：在触摸启动时，您将更新
指针和画笔，以便指针可以“移动”离开
刷直到达到惰性半径。这就是它在
演示页面。

示例

查看 basic example 一个简单的起点
关于如何使用这个库。