правильная позиция курсора на элементе canvas (html5) в затмении, но не в других браузерах - PullRequest
Новая
       27

правильная позиция курсора на элементе canvas (html5) в затмении, но не в других браузерах

0 голосов
/ 15 декабря 2011

Я разрабатываю визуализатор некоторых графиков в jquery.Для этого я использую новую функциональность html5: canvas.getContext ('2d'), объясненную здесь: https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas Теперь я могу рисовать интерактивные узлы на холсте, без использования flash или java.

Проблема, с которой я столкнулся, связана с положением курсора относительно этого холста.Мне нужно это положение, чтобы проверить, находится ли это положение между границами узла.

Эта функция прекрасно работает в браузере Eclipse, но по какой-то странной причине она не работает в Chrome или Firefox.После многих отладок я обнаружил, что вертикальное положение (.y) узлов неверно (поэтому, когда вы размещаете 20px ниже узла в chrome или 50px ниже узла в firefox, все работает нормально).Я могу изменить эти числа в зависимости от браузера, но я ожидаю много проблем с такого рода решениями.

Я работаю с библиотекой arborjs.Я не думаю, что проблема находится в самой этой библиотеке, потому что этот сайт прекрасно работает с той же библиотекой и (почти) с тем же ее использованием.

Ее кодФрагмент ближайшей функции файла arbor.js, который выполняет итерацию по всем узлам и проверяет, находится ли нажатая позиция между границами узла. 

nearest: function (x) {
                    var original = x;
                    if (u !== null) {
                        x = g.fromScreen(x)
                    }
                    var w = {
                        node: null,
                        point: null
                    };
                    var v = g;
                    $.each(c.nodes, function (B, y) {
                        var z = y._p, pos = g.toScreen(z),
                            width = y.data.width, 
                            height = y.data.height,
                            pos = g.toScreen(z),
                            bound1 = pos.x - width/2,
                            bound2 = pos.x + width/2,
                            bound3 = pos.y - height/2,
                            bound4 = pos.y + height/2;;
                        if (z.x === null || z.y === null) {
                            return
                        }
                        if (bound1 < original.x && original.x < bound2 &&
                            bound3 < original.y && original.y < bound4) {
                            w = {
                                node: y,
                                point: z
                            };
                            if (u !== null) {
                                w.screenPoint = g.toScreen(z)
                            }
                        }
                    });
                    if (w.node) {
                        if (u !== null) {
                            w.distance = g.toScreen(w.node.p).subtract(g.toScreen(x)).magnitude()
                        }
                        return w
                    } else {
                        return null
                    }
                },

и это узел, вызывающий / использующий его: 

var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);
selected = particleSystem.nearest(_mouseP);

Есть ли у кого-нибудь опыт с такими ошибками?Я надеюсь, что я описал проблему достаточно.

...