2014 dxdy logo

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

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




Начать новую тему Ответить на тему На страницу Пред.  1, 2, 3
 
 Re: Неработающий код (HTML + JS)
Сообщение03.06.2020, 23:14 


02/05/19
396
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 
Заслуженный участник
Аватара пользователя


01/09/13
3013
kotenok gav
Тем не менее, вопрос про размер....

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение03.06.2020, 23:35 


21/05/16
3939
Аделаида
Connector в сообщении #1466968 писал(а):
Не лучше ли использовать drawImage()?

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение04.06.2020, 13:23 


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


21/05/16
3939
Аделаида
Seman, спасибо!

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 17:58 


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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 19:17 


29/12/13
304
  • вычислять стиль надо после добавления в dom
  • getComputedStyle(picker2).width -- возвращает строку "4px"
https://jsfiddle.net/yjd8nxqb/

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 19:29 


21/05/16
3939
Аделаида
Я пропустил строчку 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 


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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение09.06.2020, 19:44 


21/05/16
3939
Аделаида
Seman, спасибо!

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение11.06.2020, 10:12 


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

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

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение11.06.2020, 17:09 


29/12/13
304
Когда клик по 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 


21/05/16
3939
Аделаида
Seman, спасибо!

 Профиль  
                  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 43 ]  На страницу Пред.  1, 2, 3

Модераторы: Karan, maxal, Toucan, PAV, Супермодераторы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group