http://hakuhin.hp.infoseek.co.jp/main/as/draw.ht …
上記はFlashでの実装ですが、html+JavaScriptで同じ事を実現するにはどうしたらよいでしょうか?
No.1ベストアンサー
- 回答日時:
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>のセル1マスを1つのドットとして表していますが、
アイコンなどピクセル数が少ないドット絵を描くなら、この方法が拡大縮小も簡単で良いと思います。
クロージャの説明になっていますが、クロージャがわからなければ
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だと、時折描画できなくなりました。
No.2
- 回答日時:
> また、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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jqueryとJavaについて 2 2022/05/16 22:39
- PHP ECCUBE4のページ管理でPHPを実行させたい 1 2023/04/06 11:42
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- JavaScript プルダウンから1個選んで、豆知識を出すプログラム。 2 2022/06/21 17:27
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
描画処理が実行されない
-
JAVAでの背景画像表示
-
VB.NET フォーム上に描いたグ...
-
画面のちらつきの原因が知りた...
-
StyleConstants.setLineSpacing...
-
GDI+で描画した画像を消去する...
-
getGraphics()の意味を教えて...
-
Androidで画像の中で指定した範...
-
PDF帳票を作成するためのフリー...
-
VS Treeview のデザイン変更
-
エクセルVBAで、条件に一致する...
-
EXCEL VBAにて動的にCheckBOXを...
-
「タイプ初期化子が例外をスロ...
-
public static void main (Stri...
-
Labelコントロールに数字を代入...
-
C# 点の描き方をおしえてくだ...
-
private static という変数の修飾
-
mainメソッドのthrows節で設定...
-
final修飾子を使っているのに、...
-
DataGridViewでセルクリックイ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VB.NET フォーム上に描いたグ...
-
VB.NETのSendMessageを教えてく...
-
JAVAでの背景画像表示
-
C# DataGridView のCellPaintin...
-
重なった要素上でのイベントで...
-
C# リストビューの特定のセルの...
-
画面のちらつきの原因が知りた...
-
Androidで画像の中で指定した範...
-
複数画像表示切り替え Visual c++
-
VS Treeview のデザイン変更
-
Labelコントロールの背景をグラ...
-
描画処理が実行されない
-
GDI+で描画した画像を消去する...
-
このプログラミングをどう組み...
-
canvasで表示されてる画像を1...
-
ドラッグして矩形を描くには
-
Canvas等の図形を移動する時,直...
-
getGraphics()の意味を教えて...
-
DirectXのスプライト機能で3D回転
-
Exception occurred during eve...
おすすめ情報