私は、描画アプリケーションでマウスの動きが速くて線を壊さないようにするにはどうすればいいですか？

私は、ユーザーがマウスを使って描画することができますスクリプトに取り組んでいます： http://jsfiddle.net/ujMGu/私は、描画アプリケーションでマウスの動きが速くて線を壊さないようにするにはどうすればいいですか？

問題：あなたは本当に速いマウスを移動した場合には、いくつかの場所をピクピクしてスキップします。描画線の間に黒いスペースをスキップすることなく、すべての点をキャプチャする方法はありますか？あなたがを追跡する必要があるだろう

CSS

#myid{background: none repeat scroll 0 0 #000000; 
    color: #FFFFFF; 
    display: block; 
    height: 1000px; 
    margin: 3%; 
    position: relative; 
    text-indent: -1100px;}

JS/JQ

$('#myid') 
.css('position','relative') 
.unbind().die() 
.bind('mousemove mouseover',function (e){ 
var top = parseInt(e.pageY)-$(this).offset().top; 
var left= parseInt(e.pageX)-$(this).offset().left; 
var pixel= $('<div></div>') 
    .css({ 
     width:10,height:10, 
     background: '#fff', 
     position:'absolute', 
     top: top, left: left, 
     'border-radius': 2 
    }); 
    $(this).append(pixel); 
});

HTML

<div id="myid"></div>

出典

2012-03-06 Val

おそらく、divでこれを行うのは悪い考えです。代わりにキャンバスを使用することを検討してください。 divは単純なラスターペインティングではなくDOM操作を必要とするため、ほとんどのブラウザーはdivよりもキャンバスが速くなります。 –

（divsをピクセルとして使用する）この方法でのペインティングはかなり制限されています。要件とブラウザのサポートは何ですか？キャンバスではなく、このメソッドを使用する必要がある理由はありますか？ –

私はキャンバスにはあまりよく慣れていません。複雑なやり方で、この背後にあるものの上にオーバーレイ/マスクとして他の人にこのメッセージを送ることができます。 – Val

チェック：http://jsfiddle.net/KodeKreachor/9DbP3/6/

は、与えられたリンク上の次のオブジェクトは、アルゴリズムが含まれています

var drawer = new Drawer();

あなたなら、私を知ってみましょう私がどのようにそれをやったかについては何か質問があります。前提はBresenhamのラインアルゴリズムに基づいており、古いブラウザでも互換性があるはずです。

出典

2012-03-06 16:49:55 KodeKreachor

Niceeeee、これはまあまあです:)また、私はあなたの答えのすべてを受け入れることができます笑、私はどちらを選択するかわからない:)正しい答えとして、あなたはすべて正しい答えを持ってdiffの方法:) – Val

それはあなたのために働いてうれしい。キャンバスは行くのにも最適な方法です。私は古いブラウザでもうまくいくようなものを望んでいたので、単純なdivを使ってこの例を実装しました。 – KodeKreachor

新しい点と前の点の間に線を引く。

出典

2012-03-06 16:41:26

+1のアイデアは、あなたのペインティングの方法が10x10個のdivを連続的に配置することである場合、「線を描く」ことは簡単ではありません。 –

なぜキャンバスを使用しないのですか？これは、ユーティリティを線画の数を持っています。このうち

http://www.w3schools.com/html5/html5_ref_canvas.asp

出典

2012-03-06 16:46:08 kand

私は実際にそれを持っていない時間をaloooongに費やし始めない限り、私は心に持っていたものではうまくいかないと思っていました。もっと早くなったよ:) – Val

@kandが述べたように、Canvasは本当に描画に最適なツールです。

divメソッドを使用する必要がある場合やこれが楽しいだけの場合は、以前のマウス位置を保存してから、行を完成させるために必要な間にある "ピクセル"を描画することができます。たとえば、Bresenham's line algorithm 。

出典

2012-03-06 16:53:04

私は、描画アプリケーションでマウスの動きが速くて線を壊さないようにするにはどうすればいいですか？

答えて

関連する問題