2014 dxdy logo

Научный форум dxdy

Математика, Физика, Computer Science, Machine Learning, LaTeX, Механика и Техника, Химия,
Биология и Медицина, Экономика и Финансовая Математика, Гуманитарные науки




На страницу Пред.  1, 2, 3
 
 Re: Неработающий код (HTML + JS)
Сообщение03.06.2020, 23:14 
kotenok gav,
1) обратите внимание на код, приведённый в этом ответе:
Используется синтаксис Javascript
function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
}

2) Какой-то странный способ добавить фигуру на холст Вы избрали. Не лучше ли использовать drawImage()?
Используется синтаксис Javascript
let picker = new Image();//вместо document.createElement('div');
picker.crossOrigin='Anonymous';
picker.src = "/*адрес картинки*/";
picker.onload = function() {
    canvas.onclick = function(event) {
        //context.clearRect(0, 0, 100, 100); //стирает градиент, увы!
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        context.drawImage(picker, 0, 0, 20, 20, x, y, 20, 20);
    }
}

 

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение03.06.2020, 23:20 
Аватара пользователя
kotenok gav
Тем не менее, вопрос про размер....

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение03.06.2020, 23:35 
Connector в сообщении #1466968 писал(а):
Не лучше ли использовать drawImage()?

Это, кажется, подойдет... Посмотрю.

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение04.06.2020, 13:23 
Можно и так как изначально хотели. Только добавлять на холст html элементы так нельзя. Слой надо добавлять надо к какому-другому html элементу.
https://jsfiddle.net/qeuxzsj8/14/
И может имеет смысл где справку почитать?, например:
Положение в css через js, должно как текст и юниты на конце :
https://developer.mozilla.org/en-US/doc ... S/position
https://developer.mozilla.org/en-US/docs/Web/CSS/left -- left
https://developer.mozilla.org/en-US/docs/Web/CSS/right -- right
https://developer.mozilla.org/en-US/doc ... tyle/style -- ElementCSSInlineStyle
Как рисовать фигуры на холсте(предпочтительней)
https://developer.mozilla.org/en-US/doc ... ing_shapes

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение04.06.2020, 16:01 
Seman, спасибо!

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 17:58 
Не работает такой код:
https://jsfiddle.net/dn7cxrba/
Элемент container должен получиться 39 x 200, а получается 839 x 204.

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 19:17 
  • вычислять стиль надо после добавления в dom
  • getComputedStyle(picker2).width -- возвращает строку "4px"
https://jsfiddle.net/yjd8nxqb/

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 19:29 
Я пропустил строчку picker2.style.display = 'none'( offsetWidth тогда не подойдет:
Цитата:
If the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.


-- 10 июн 2020, 02:00 --

Seman в сообщении #1467844 писал(а):
возвращает строку "4px"

Сделаю parseInt.

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 19:36 
можно "none" применить после, наверно.
и может лучше, через style, не атрибут :
https://jsfiddle.net/kwznq736/ , т.к. ещё div по размеру дочернего элемента растягивается.

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 19:44 
Seman, спасибо!

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение11.06.2020, 10:12 
https://jsfiddle.net/joz0kswq/5/
Если начинать перетаскивание с canvas2 или container, все нормально. Но если начать перетаскивание с picker2, то тогда он не останавливается, и продолжает двигаться за мышью (видимо, почему-то не срабатывают removeEventListener'ы).

-- 11 июн 2020, 17:19 --

Упс, я пропустил точку с запятой после event.preventDefault(). Но исправление этого все равно ничего не меняет...

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение11.06.2020, 17:09 
Когда клик по container, то на второй раз, несколько раз вызывается onmousedown, первый раз на событие mousedown на color-picker-line-container , второй раз на событие на "color-picker-line-picker", одно в другом, соответственно несколько раз добавляется listener mousemove, а удаляется только один.
На https://jsfiddle.net/ это может не очень наглядно
Изображение .
Ещё плохая ситуация когда уводишь курсор с элемента по которому щелкнул и начал перемещение., наверное, надо также обрабатывать onmouseleave.
Вот так более-менее работает https://jsfiddle.net/n8b3rsza/ .
Думаю, создавать и удалять события лучше один раз вместе с элементом. Т.е. лучше, как-бы, либо удалять и создавать каждый раз все затронутые элементы, либо какую глобальную переменную использовать как флаг(который показывает надо перемещать picker или нет).

 
 
 
 Re: Неработающий код (HTML + JS)
Сообщение11.06.2020, 17:20 
Seman, спасибо!

 
 
 [ Сообщений: 43 ]  На страницу Пред.  1, 2, 3


Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group