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ランキング
-
C# DataGridView のCellPaintin...
-
VB.NET フォーム上に描いたグ...
-
Exception occurred during eve...
-
DirectXのスプライト機能で3D回転
-
BMP画像を画像処理して連続に表...
-
エクセルVBAで、条件に一致する...
-
複数の変数を宣言する時、同時...
-
変数名の付け方
-
「タイプ初期化子が例外をスロ...
-
private static という変数の修飾
-
エクセルVBA 画像を貼り付ける...
-
パワーポイントのVBAでテキスト...
-
SQLを連続発行する時の正しい(?...
-
生成したインスタンスを削除す...
-
VBAでの[]
-
インスタンス参照でアクセスで...
-
コマンドライン引数のチェック
-
Java初級 引数に適用できません
-
エクセルVBAにおけるON TIMEメ...
-
C#のクラスで値渡しをする
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VB.NET フォーム上に描いたグ...
-
C# DataGridView のCellPaintin...
-
VB.NETのSendMessageを教えてく...
-
canvasで表示されてる画像を1...
-
Exception occurred during eve...
-
requestanimationframeを一斉に...
-
Labelコントロールの背景をグラ...
-
SwingとEDT(イベントディスパッ...
-
C# リストビューの特定のセルの...
-
MFCでMSペイントみたいなツー...
-
画面のちらつきの原因が知りた...
-
JAVAでの背景画像表示
-
Androidで画像の中で指定した範...
-
このプログラミングをどう組み...
-
描画してもウィンドウをリサイ...
-
JavaScriptで直線を描画したい
-
SwingのpaintComponent(...
-
BMP画像を画像処理して連続に表...
-
Java 15パズルを作ったのですが...
-
<JFreeChart> 縦軸の値の間隔を...
おすすめ情報