Question

deviantART muro拥有一套出色的绘画工具。我非常好奇如何实现这些画笔，如Sketch和Paintbrush，算术？

使用任何普通的编程语言来解释是可以的，尽管我更喜欢C ++或JavaScript。我认为它比阅读他们的JS源代码要好。

Answer 1

我会说它有点像：

跟踪鼠标移动
在捕获的鼠标移动时，将所需的画笔从保存的“鼠标位置”绘制到捕获的“新鼠标位置”，一次迭代一个像素的距离
如果你移动鼠标的速度太快而无法捕获脚本，那么它看起来就像一条计算的长直线（这就像Muro所做的那样）。如果你想获得真正的幻想，你可以从之前的鼠标位置计算出轨迹，并将其绘制成“更平滑”的线条。

由于您指定了Javascript，因此您可能希望在canvas对象中绘制它。

编辑1：

Sketch专门用于保存鼠标移动然后循环，比如每次鼠标移动的20个最新鼠标移动，并绘制从该点到当前点的贝塞尔曲线。

所以，像（伪代码）

Object mousemovements = [];
on.mousemove(event)
{
  if (mousemovements.length > 20)
  {
     mousemovements.removeLast();
  }
  mousemovements.insertAtBeginning([ event.mouseX, event.mouseY ]);
  for-each (movement in mousemovements)
  {
     drawBeziercurveFromTo(movement.mouseX, movement.mouseY, 
                           event.mouseX, event.mouseY);
  }
}

Jquery/Canvas DEMO based on the above pseudo code

编辑2：

我仔细研究了“草图”是如何工作的，似乎它们更新了鼠标指针的位置，将较旧的点移近了较新的点。像这样：

This DEMO works pretty much like the sketch brush

如何在deviantART muro中实现草图画笔？

1 个答案: