- ベストアンサー
JavaScriptで直線を描画したい
http://hakuhin.hp.infoseek.co.jp/main/as/draw.html#GRAPHICS_03 上記はFlashでの実装ですが、html+JavaScriptで同じ事を実現するにはどうしたらよいでしょうか？
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- JavaScript
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
onmousedownのマウスの位置を開始地点、onmouseupを終了地点として、 onmouseupのタイミングで開始地点から終了地点に線を引きます。 線を引く方法ですが、 HTMLとJavaScriptで行うには、 <div style="position:absolute;width:1px;height:1px;background-color:blue;></div> これDOMで作成して、topとleftを指定してたくさん並べれば、青い線が引かれているように表示されます。 （丸い枠線を書くNiftyCornerなどでも使われている方法です） こういうライブラリを使うのが簡単だと思います。 http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm ブラウザが限られますが、canvasなら<div>をたくさん作る必要もなくてlineTo()を呼び出すだけで出来ます。 http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html http://developer.mozilla.org/en/docs/HTML:Canvas ちょっと違いますが、 http://0xcc.net/blog/archives/000040.html こういう方法で絵を描くことも出来ます。 <table>のセル１マスを１つのドットとして表していますが、 アイコンなどピクセル数が少ないドット絵を描くなら、この方法が拡大縮小も簡単で良いと思います。 クロージャの説明になっていますが、クロージャがわからなければ colors=[ [0,0,0,0] ,[0,0,0,0] ,[0,0,0,0] ,[0,0,0,0] ]; このようなグロバール変数に、セルのrowとcolを対応させて色を管理しても良いと思います。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
> また、IEだと、時折描画できなくなりました。 すみませんが、この原因はわかりません。 > マウスオンからマウスオフまでは動的にマウスを追尾するように描画し、マウスオフで確定としたいのですが、実装できません。。。 アルゴリズムだけですが。 onmousedownで開始地点をセットするのは同じですが、 onmousemoveで常に線を描画します。 そのとき、昔の線を残したままだと、線が何重にも書かれてしまうので、 mousemoveの度に直前の線を消して、改めて新しい線を引かなければなりません。 jsgraphics.jsの場合は、指定した線だけを消すことが出来ればいいのですが、 それができなければ、配列に今までどんな線を引いたか覚えておいて、 onmousemoveの度に 全てクリア -> 確定分を全て描画 -> 今回のonmouvemoveの分を描画 と、ちょっと処理に時間がかかるかも知れません。 あとはonmouseupで確定するため、配列にpushです。 マウスボタンを押した後、ブラウザウインドウの外でマウスアップすると、onmouseupイベントが発生しないことがあります。 私の場合は、キャンバス内でmousedown -> キャンバス外でmousedownすると、キャンバスの描画をキャンセル、 キャンバス内でonmousedown -> onmousedownの順番でイベントが発生したら、2回目のmousedownの位置を開始地点に上書きにしました。
お礼
頂いたアドバイスを元に以下の様に実現できました。 ありがとうございました。 <html> <head> <script type="text/javascript" src="wz_jsgraphics.js"></script> <script type="text/javascript"> <!-- function getMousePosition(e) { var obj = new Object(); if(e) { obj.x = e.pageX; obj.y = e.pageY; } else { obj.x = event.x + document.body.scrollLeft; obj.y = event.y + document.body.scrollTop; } return obj; } window.onload = function (){ var fromX; var fromY; var toX; var toY; var mouseon=0; var jg = new jsGraphics("myCanvas"); window.document.onmousemove = function(e){ if(mouseon==1){ toX = getMousePosition(e).x; toY = getMousePosition(e).y; jg.clear(); jg.setColor("#ff0000"); jg.drawLine(fromX, fromY, toX, toY); jg.paint(); } } window.document.onmousedown = function(e){ jg.clear(); mouseon=1; fromX = getMousePosition(e).x; fromY = getMousePosition(e).y; } window.document.onmouseup = function(e){ mouseon=0; toX = getMousePosition(e).x; toY = getMousePosition(e).y; var jg2 = new jsGraphics("myCanvas"); jg2.setColor("#000000"); jg2.drawLine(fromX, fromY, toX, toY); jg2.paint(); } } //--> </script> </head> <body> <div id="myCanvas" ></div> </body> </html>
補足
ご回答ありがとうございます。 「ブラウザが限られる」の注釈の無い方法で試してみました。 ＞onmousedownのマウスの位置を開始地点、onmouseupを終了地点として、 ＞onmouseupのタイミングで開始地点から終了地点に線を引きます。 とのアドバイスと、紹介して頂いたライブラリを使って、以下の様に書いてみました。 <html> <head> <script type="text/javascript" src="wz_jsgraphics.js"></script> <script type="text/javascript" src="prototype-1.5.1.2.js"></script> <script type="text/javascript"> <!-- var fromX; var fromY; var toX; var toY; window.onload = function (){ Event.observe(window.document, "mousedown", from, false); Event.observe(window.document, "mouseup", to, false); } function from(event){ fromX = Event.pointerX(event); fromY = Event.pointerY(event); } function to(event){ toX = Event.pointerX(event); toY = Event.pointerY(event); var jg = new jsGraphics("myCanvas"); jg.setColor("#ff0000"); // red jg.drawLine(fromX, fromY, toX, toY); // co-ordinates related to "myCanvas" jg.paint(); } //--> </script> </head> <body> <div id="myCanvas"></div> </body> </html> マウスオンからマウスオフまでは動的にマウスを追尾するように描画し、マウスオフで確定としたいのですが、実装できません。。。 また、IEだと、時折描画できなくなりました。