Неработающий код (HTML + JS)

[Connector]

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

 

[Geen]

kotenok gav
Тем не менее, вопрос про размер....

[kotenok gav]

Connector в сообщении #1466968 писал(а):

Не лучше ли использовать drawImage()?

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

[Seman]

Можно и так как изначально хотели. Только добавлять на холст 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

[kotenok gav]

Seman, спасибо!

[kotenok gav]

Не работает такой код:
https://jsfiddle.net/dn7cxrba/
Элемент container должен получиться 39 x 200, а получается 839 x 204.

[Seman]

• вычислять стиль надо после добавления в dom
• getComputedStyle(picker2).width -- возвращает строку "4px"

https://jsfiddle.net/yjd8nxqb/

[kotenok gav]

Я пропустил строчку 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.

[Seman]

можно "none" применить после, наверно.
и может лучше, через style, не атрибут :
https://jsfiddle.net/kwznq736/ , т.к. ещё div по размеру дочернего элемента растягивается.

[kotenok gav]

Seman, спасибо!

[kotenok gav]

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

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

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

[Seman]

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

[kotenok gav]

Seman, спасибо!