Я работаю в проекте, основанном на Netron (Библиотека редактирования графиков, написанная на JavaScript с использованием элемента canvas HTML5. Дважды щелкните, чтобы редактировать элемент. Перетащите точки подключения, чтобы нарисовать подключения.) Но Мне нужно поместить 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 требуется, поскольку используется для добавления элементов на холст (пример: Добавление человека на этой странице ).
Извините, мой английский не очень хорош. Спасибо за любую помощь, которую вы можете оказать.