0

我目前正在开发一个使用HTML 5和JavaScript用于绘制图形的 iOS 应用程序。

我刚刚做了一个示例应用程序。

我的代码：

<!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 位置总是错误的。

我做了什么：

  • 在模拟器上测试过
  • 在设备上测试过
  • 在火狐上测试过
  • 在 Chrome 上测试过

所有结果都是一样的。我找不到问题。我提醒了点击x和y坐标。它来正确。唯一的问题是绘图功能。

截图：

点击点

画线

如您所见，X 坐标是正确的。但是 Y 坐标总是出错。

请帮助我，在此先感谢。

4

2 回答 2

2

你能做这些改变吗？

在 html 行@47 中，

 <canvas id="can" height=300 width=300 style="background-color:red;">Oops!</canvas>

在脚本行@23 中，

            c.beginPath();
            c.moveTo(a, b);
            a = event.clientX - parentPosition.x;
            b = event.clientY - parentPosition.y;
            console.log('a:'+a+'--b:'+b);
            c.lineTo(a, b);
            c.stroke();
于 2013-06-10T08:10:48.767 回答
1

清除 这是您必须更改才能拥有可重用代码的代码：

        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:width) 300/150=2 (b:height) 在此处输入图像描述

旧回复：

但是现在，你必须猜猜为什么......因为实际上我没有时间

<!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 回答