0

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

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

4

1 回答 1

3

我会说它的工作原理类似于：

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

编辑2：

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

这个DEMO的工作原理很像sketch画笔

于 2012-11-05T10:35:32.590 回答