将 canvas.focus() 放入
时防止滚动（仅在 IE 中失败）

发布于 2024-12-15 04:23:44 字数 2577 浏览 0 评论 0原文

我正在开发一个基于 Netron 的项目（使用 HTML5 画布用 JavaScript 编写的图形编辑库）双击编辑元素。拖动连接点来绘制连接。）但是我需要将 Canvas 放入 DIV 中，以便在 Canvas 大于 DIV 时添加滚动条。

在 Firefox、Opera、Safari、Chrome 中一切正常...但是当我滚动（例如向下）并在画布中单击此区域时，Internet Explorer 滚动将重置到初始位置。

这是故障代码的提取：

<!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 是必需的，因为它用于向画布添加元素（例如：在此页面中添加人员）。

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

原文

I'm working in a proyect based on Netron (A graph editing library written in JavaScript using the HTML5 canvas element. Double-click to edit an element. Drag connection points to draw connections.) But I need to put the Canvas into a DIV to add the scrollbar possibility when the canvas is bigger than the DIV.

All works fine in Firefox, Opera, Safari, Chrome... but Internet Explorer when I scroll (for example down) and click on this area into the canvas the Scroll is reset to initial position.

It's an extraction of the failure code:

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

You can reproduce the error doing scroll down and click on red circle (or in the white are around the red circle). Yellow represent the DIV area.

EventLister is required, because is used to add elements to the canvas (example: Add Person in this page).

Sorry mi English isn't very good. Thanks for all help you may provide.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残月升风 2024-12-22 04:23:44

我找到了解决方案。

评论焦点线。

//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);

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

I found a solution.

Commenting the focus line.

//this.canvas.focus();

Without this instruction the canvas lose the focus then don't move the scrollbar, but the rapid access key (like ctrl+z) defined don't work. I change the other "Key" EventListener from "this.canvas" to "document" and works again.

From:

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

To:

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

Thanks! I hope this solution can help others!

回复收藏 0 原文

~没有更多了~