0

deviantART muroには素晴らしいペイント ツールが揃っています。そして、スケッチやペイントブラシのようなこれらのブラシを算術的に実装する方法に非常に興味がありますか?

通常のプログラミング言語を使用して説明しても問題ありませんが、私は C++ または JavaScript の方が好きです。JS のソース コードを読むよりはましだと思います。

4

1 に答える 1

3

私はそれが次のように機能すると思います：

  • マウスの動きを追跡する
  • キャプチャされたマウスの動きで、一度にピクセルの距離で反復しながら、保存された「古いマウス位置」からキャプチャされた「新しいマウス位置」まで目的のブラシを描画します
  • マウスを動かす速度が速すぎてスクリプトがキャプチャできない場合は、計算された長い直線のように見えます (Muro が行っているように見えます)。より凝ったものにしたい場合は、以前のマウスの位置から軌道を計算し、代わりに「より滑らかな」線を描くことができます。

canvasJavascript を指定したので、おそらくそれをオブジェクトに描画したいと思うでしょう。

編集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：

「スケッチ」がどのように機能するかを詳しく調べたところ、マウスポインターの位置が更新され、古いポイントが新しいポイントに近づいているようです。このようなもの：

sketchこのデモはブラシのように機能します

于 2012-11-05T10:35:32.590 に答える