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 回答