Хобрук: Ваш путь к мастерству в программировании

Mouseup в Kineticjs не отображается должным образом

Я нахожусь в процессе создания игры с сенсорным экраном для своей работы. Я смотрел учебник о том, как сделать его с помощью простого холста html5. В любом случае, я хотел преобразовать этот код для работы с кинетическим js. Я все преобразовал, но по какой-то причине линия не перестает рисовать при наведении мыши каждый раз, как должна. Кажется, я не могу понять, что я делаю неправильно. Я чувствую, что это может иметь какое-то отношение к моей функции рисования, но я не уверен

Вот код простого холста, который отлично работает: http://jsfiddle.net/mdurchho/zC7c2/

function paint(x, y) {
    cx.beginPath();
    if (oldx > 0 && oldy > 0) {
        cx.moveTo(oldx, oldy);
    }
    cx.lineTo(x, y);
    cx.stroke();
    cx.closePath();
    oldx = x;
    oldy = y;
}

Вот код кинетики, который не работает должным образом: http://jsfiddle.net/mdurchho/G6p4k/

function paint(x, y) {
    if (oldx > 0 && oldy > 0) { 
        var line = new Kinetic.Line({
            points: [oldx,oldy, x,y],
            stroke: 'red',
            strokeWidth: 20,
            lineCap: 'round',
            lineJoin: 'round'
        });
        layer.add(line);
        layer.draw();
    }
    oldx = x;
    oldy = y;
}

Любые предложения будут ценны!


  • К сожалению, это разочаровывающая ошибка :-( В качестве обходного пути вы можете использовать jQuery для прослушивания событий в div кинетического содержимого следующим образом: $(stage.getContent()).on('mouseup', function (event) {}); 07.11.2013
  • Эй, Марк, большое спасибо за ответ! Это сработало отлично 07.11.2013

Ответы:


1

Это не ошибка!

Когда вы рисуете, вы создаете линии на сцене. Но вы поставили только

box.on('mouseup', onmouseup, false);

Поэтому, когда мышь находится под линией, это не вызовет событие mouseup окна. И это правильно. Таким образом, вы можете слушать сценические события вместо событий бокса (чистый кинетический способ):

stage.on('mousedown', onmousedown, false);
stage.on('mouseup', onmouseup, false);
stage.on('mousemove', onmousemove, false);

http://jsfiddle.net/lavrton/J2JsJ/

09.11.2013
Новые материалы

Введение в контекст React
В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..

Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..

Это оно
Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..

7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...

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

C в C.R.U.D с использованием React-Redux
Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..

5 обязательных элементов современного инструмента конвейера данных
В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..