Dynami c изменить стиль элемента (DomIcon) - PullRequest
Новая
       3

Dynami c изменить стиль элемента (DomIcon)

2 голосов
/ 05 февраля 2020

Я застрял и мне нужен совет. Я просто хочу изменить свой DomIcon, который назначен DomMarker на карте здесь. Он был разработан в Angular / Ioni c, и я просто хочу вращать PNG вокруг якоря. Я просто создал новые элементы в моем компоненте. Однако независимо от того, как я установил преобразование, оно немедленно перезаписывается обновленной матрицей преобразования. 

    var theFather = document.createElement('div');
    var domElement = document.createElement('img')
    domElement.setAttribute('class', 'theThing')
    domElement.src ='./assets/icons/aThing.png'

    domElement.style.width = '40px';
    domElement.style.height = '40px';

    theFather.appendChild(domElement);

Я пробовал разные варианты, обсуждаемые на форуме, чтобы повернуть вещь, но я всегда терпел неудачу. Очевидно, я что-то пропускаю в своих испытаниях.

Итак, 1) Пытался просто преобразовать: повернуть, установив cssText или style.transform клонированного png img (DomIcon) в обратном вызове присоединения. Он вращается правильно и на том же pt, но вращается только в том случае, если clonedElement вращается в обратном вызове onAttach. Плохо, я не могу обновить clonedElement внешним событием, которое не является DOM или здесь API-событием. Правильно? 

  var domIcon = new H.map.DomIcon(domElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedElement.addEventListener('mouseover', rotateThisThing);
}

2) Пытался просто повернуть исходный PNG, но это не преобразуется вообще. Я вижу, что cssText обновлен и исправлен, но он не отображается на карте. 

domIcon.c.style.cssText += 'transform: rotate(90deg)';

3) Попытка установить свойства стиля элементов путем вычисления поворота в преобразовании: матрица, которая правильно вращает Значок и установить в самом документе, но, к сожалению, это очень изменчиво. 

document.getElementsByTagName("img")[i].style.cssText += 'transform: ' + newval;

4) Попытка установить свойства стиля элементов в 3), но с использованием Renderer2 

this.render2.setStyle(document.getElementsByClassName("theThing")[i],"transform",newval)

5) Попытался экспортировать новую переменную CSS и повернуть в CSS напрямую. 

 this.mapElement.nativeElement.style.setProperty('--the-rotator', value);

Что мне здесь не хватает? Ваш совет очень признателен?

Большое спасибо заранее, О.

1 Ответ

1 голос
/ 06 февраля 2020

API управляет положением маркера, изменяя свойство стиля преобразования клонированного элемента Dom. В вашем случае clonedElement внутри обратного вызова onAttach является клоном theFather. Поэтому ваш обратный вызов onAttach должен выглядеть, например, следующим образом: 

var domIcon = new H.map.DomIcon(domElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedElement.getElementsByTagName("img")[i].style.transform = 'rotate(90deg)'
}

Ниже приведен пример кода, который вращает стрелку DomMarker каждую 1 секунду. Посмотрите, как ссылка на клонированный элемент присваивается переменной clonedElement, которая затем используется в функции setInterval. 

var domIconElement = document.createElement('div'),
    domIconContent = document.createElement('div'),
    marker,
    clonedContent,
    counter = 0;

domIconContent.classList.add('dom-icon-content')
domIconContent.innerHTML = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40" height="40">
    <path d="m0.812665,23.806608l37.937001,-22.931615l-21.749812,38.749665l1.374988,-17.749847l-17.562177,1.931797z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
  </svg>`;
domIconElement.appendChild(domIconContent);

marker = map.addObject(new H.map.DomMarker(map.getCenter(), {
  icon: new H.map.DomIcon(domIconElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedContent = clonedElement.getElementsByClassName('dom-icon-content')[0];
    }
  })
}));

setInterval(function() {
    if (clonedContent) {
        clonedContent.style.transform = 'rotate(' + (counter += 45) + 'deg)';
    }
}, 1000)
...