カンパ〜イ！←最初の1杯目、なに頼む？

JavaScriptで直線を描画したい

解決済

  • 質問者：kingfruits
  • 質問日時：
  • 回答数：2件

http://hakuhin.hp.infoseek.co.jp/main/as/draw.ht …
上記はFlashでの実装ですが、html+JavaScriptで同じ事を実現するにはどうしたらよいでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： taloo
  • 回答日時：

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_ …


ブラウザが限られますが、canvasなら<div>をたくさん作る必要もなくてlineTo()を呼び出すだけで出来ます。
http://developer.apple.com/documentation/AppleAp …
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を対応させて色を管理しても良いと思います。

この回答への補足

ご回答ありがとうございます。
「ブラウザが限られる」の注釈の無い方法で試してみました。
＞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だと、時折描画できなくなりました。

補足日時：2008/07/15 15:19
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： taloo
  • 回答日時：

> また、IEだと、時折描画できなくなりました。


すみませんが、この原因はわかりません。


> マウスオンからマウスオフまでは動的にマウスを追尾するように描画し、マウスオフで確定としたいのですが、実装できません。。。

アルゴリズムだけですが。

onmousedownで開始地点をセットするのは同じですが、
onmousemoveで常に線を描画します。
そのとき、昔の線を残したままだと、線が何重にも書かれてしまうので、
mousemoveの度に直前の線を消して、改めて新しい線を引かなければなりません。

jsgraphics.jsの場合は、指定した線だけを消すことが出来ればいいのですが、
それができなければ、配列に今までどんな線を引いたか覚えておいて、
onmousemoveの度に
全てクリア -> 確定分を全て描画 -> 今回のonmouvemoveの分を描画
と、ちょっと処理に時間がかかるかも知れません。

あとはonmouseupで確定するため、配列にpushです。


マウスボタンを押した後、ブラウザウインドウの外でマウスアップすると、onmouseupイベントが発生しないことがあります。
私の場合は、キャンバス内でmousedown -> キャンバス外でmousedownすると、キャンバスの描画をキャンセル、
キャンバス内でonmousedown -> onmousedownの順番でイベントが発生したら、2回目のmousedownの位置を開始地点に上書きにしました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

頂いたアドバイスを元に以下の様に実現できました。
ありがとうございました。

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

通報する
お礼日時：2008/07/17 19:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報