javascript - 像deviantART muro一样，如何实现素描画笔？

deviantART muro具有一组出色的绘画工具。而且我很好奇如何以算术方式实现诸如Sketch和Paintbrush之类的画笔？

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

最佳答案

我会说它的工作原理如下：


跟踪鼠标移动
在捕获的鼠标移动上，从保存的“旧鼠标位置”绘制所需的画笔到捕获的“新鼠标位置”，一次迭代一个像素的距离
如果鼠标移动得太快而无法捕获脚本，它将看起来像一条计算出的长直线（这就是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

关于javascript - 像deviantART muro一样，如何实现素描画笔？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12973003/