0

私は現在、グラフを使用HTML 5して描画するための iOS アプリに取り組んでいます。JavaScript

サンプルアプリを作成しました。

私のコード:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var a = 0;
            var b = 0;
            function init()
            {
                var can = document.getElementById('can');
                can.addEventListener("click",click, false);
            }

            function click(event)
            {
                var can = document.getElementById('can');
                var c = can.getContext('2d');
                var parentPosition = getPosition(event.currentTarget);
                c.lineWidth = 1;
                c.strokeStyle = '#FFFFFF';
                c.beginPath();
                c.moveTo(a, b);
                a = event.clientX - parentPosition.x;
                b = event.clientY - parentPosition.y;
                c.lineTo(a, b);
                c.stroke();
            }
            function getPosition(element)
            {
                var xPosition = 0;
                var yPosition = 0;

                while (element)
                {
                    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
                    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
                    element = element.offsetParent;
                }
                return { x: xPosition, y: yPosition };
            }
        </script>
    </head>
    <body oncopy='copy();' onpaste='paste();'onload ='init();'>
            <canvas id="can" style="height:300px;width:300px;background-color:black;">Oops!</canvas>
    </body>
</html>

私の問題:

ユーザーが画面をタップすると、前のポイントからその特定のポイントまで線が引かれます。

しかし、私の場合、画面をタップすると、線が他の点に描画されます。ポイント (100,100) をタップすると、線が (100、任意の値) に描画されるとします。Y 位置は常に間違っています。

私がしたこと：

  • シミュレーターでテストしました
  • デバイスでテストしました
  • Firefoxでテストしました
  • Chromeでテストしました

すべての結果は同じです。問題が見つかりませんでした。クリックしxてy座標をアラートしました。正しく来ています。唯一の問題は描画機能にあります。

スクリーンショット:

クリックしたポイント

引かれた線

ご覧のとおり、X 座標は正しいです。しかし、Y座標は常に間違っています。

助けてください、よろしくお願いします。

4

2 に答える 2

1

TO CLEAR これは、再利用可能なコードにするために変更する必要があるコードです。

        c.moveTo(a/(can.clientWidth/can.width), b/(can.clientHeight/can.height));
        a = event.clientX - parentPosition.x;
        b = event.clientY - parentPosition.y;
        console.log('a:'+a+'--b:'+b);
        c.lineTo(a/(can.clientWidth/can.width), b/(can.clientHeight/can.height));

これを使用しない場合、以下のコードは 300x300 キャンバス サイズでのみ機能します。
最終編集:

2d コンテキスト (var c = can.getContext('2d');console.log(c);) を分析すると、このエラーを簡単に理解できます。キャンバスからの関係 (明示的ではない) があり、それは 2d コンテキストです。画像からわかるよう ここに画像の説明を入力 に、キャンバスの高さと幅 (これは 500*500) は、オフセット、スクロール、およびクライアント サイズとは異なります。したがって、描画する前に、比率を計算する必要があります。500/150 が高さの係数で、500/300 が幅の係数になるため、a は 1.66667 で乗算され、b は 3.33333 で乗算されます。

古い例 (キャンバス 300*300) と同じで、係数は 300/300=1 (a:幅) 300/150=2 (b:高さ) です。 ここに画像の説明を入力

古い返信:

しかし今、あなたは理由を推測する必要があります..実際には私には時間がありません

<!DOCTYPE html>
<html>
    <head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
            var a = 0;
            var b = 0;
            function init()
            {
                var can = document.getElementById('can');
                can.addEventListener("click",click, false);
            }

            function click(event)
            {
                var can = document.getElementById('can');
                var c = can.getContext('2d');
                var parentPosition = getPosition(event.currentTarget);
                console.log(parentPosition);
                console.log(event);
                c.lineWidth = 1;
                c.strokeStyle = '#FFFFFF';
                c.beginPath();
                c.moveTo(a, b/2);
                a = event.clientX - parentPosition.x;
                b = event.clientY - parentPosition.y;
                console.log('a:'+a+'--b:'+b);
                c.lineTo(a, b/2); 
                c.stroke();
            }
            function getPosition(element)
            {
                var xPosition = 0;
                var yPosition = 0;

                while (element)
                {
                    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
                    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
                    element = element.offsetParent;
                }
                return { x: xPosition, y: yPosition };
            }
        </script>
    </head>
    <body oncopy='copy();' onpaste='paste();'onload ='init();'>
            <canvas id="can" style="height:300px;width:300px;background-color:black;">Oops!</canvas>
            <br>
            pagex<input type="text" id="ics">pagey<input type="text" id="ips"><br>
            screenx<input type="text" id="ics2">screeny<input type="text" id="ips2">
            <script>
            $("#can").mousemove(function(event) {
                var msg = "Handler for .mousemove() called at ";
                document.getElementById('ics').value= event.pageX 
                document.getElementById('ips').value= event.pageY;
                document.getElementById('ics2').value= event.screenX;
                document.getElementById('ips2').value= event.screenY;
            });
            </script>
    </body>
</html>
于 2013-06-06T13:36:58.227 に答える