Question

我正在使用基于Netron的图形编辑工具（使用HTML5画布元素用JavaScript编写的图形编辑库。双击编辑元素。拖动连接点以绘制连接。）但我需要将画布放入DIV以在画布大于DIV时添加滚动条。

所有在Firefox，Opera，Safari，Chrome中运行正常...但是当我滚动（例如向下）并在画布上单击此区域时，Scroll会重置为初始位置。

这是对失败代码的提取：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dynamics</title>
    <script type="text/javascript">
        var Graph = function (element) 
        {
            this.canvas = element;
            this.canvas.focus();
            this.context = this.canvas.getContext("2d");

            this.mouseDownHandler = this.mouseDown.bind(this);
            this.canvas.addEventListener("mousedown", this.mouseDownHandler, false);
        };

        // Acciones a realizar en el canvas segun los eventos de teclado y de mouse
        Graph.prototype.dispose = function () 
        {
            if (this.canvas !== null) 
            {
                this.canvas.removeEventListener("mousedown", this.mouseDownHandler);
            }
        };

        Graph.prototype.mouseDown = function (e) 
        {
            e.preventDefault();
            this.canvas.focus(); 
        };
    </script>

    <script type="text/javascript">
        function document_load() 
        {   
            graph = new Graph(document.getElementById("canvas"));

            // Draw a Circle
            var centerX = 300;
            var centerY = 800;
            var radius = 10;

            graph.context.beginPath();
            graph.context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

            graph.context.fillStyle = "red";
            graph.context.fill();
            graph.context.lineWidth = 2;
            graph.context.strokeStyle = "black";
            graph.context.stroke();
        }
    </script>
</head>

<body onload="document_load();">
    <br/>

    <div id="canvas-div" style="width:800px;height:600px;background-color:#fff000;">
        <canvas id="canvas" tabindex="1" width="600" height="1000" style="border:solid 5px black;"></canvas>
    </div>
</body>
</html>

您可以通过向下滚动并单击红色圆圈（或白色在红色圆圈周围）重现错误。黄色代表DIV区域。

EventLister是必需的，因为它用于向画布添加元素（例如：Add Person in this page）。

抱歉mi英语不是很好。感谢您提供的所有帮助。

Answer 1

我找到了解决方案。

评论焦点线。

//this.canvas.focus();

如果没有此指令，画布将失去焦点，然后不移动滚动条，但定义的快速访问键（如ctrl + z）不起作用。我将另一个“Key”EventListener从“this.canvas”更改为“document”并再次工作。

自：

this.canvas.addEventListener("keydown", this.keyDownHandler, false);
this.canvas.addEventListener("keypress", this.keyPressHandler, false);
this.canvas.addEventListener("keyup", this.keyUpHandler, false);

要：

document.addEventListener("keydown", this.keyDownHandler, false);
document.addEventListener("keypress", this.keyPressHandler, false);
document.addEventListener("keyup", this.keyUpHandler, false);

谢谢！我希望这个解决方案可以帮助别人！

当canvas.focus（）进入<div>（仅在IE中失败）</div>时，阻止滚动

1 个答案: