时间戳

首页 > 解决方案 > 元素的动态变化样式（DomIcon）

css - 元素的动态变化样式（DomIcon）

问题描述

我被困住了，需要一些建议。我只想修改分配给此处地图中的 DomMarker 的 DomIcon。它是在 Angular / Ionic 中开发的，我只想围绕锚点旋转 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 或克隆的 png img (DomIcon) 的 style.transform 来简单地转换：旋转。它在同一个 pt 上正确旋转，但仅当 clonedElement 在 onAttach 回调中旋转时才会旋转。坏事，我无法通过不是 DOM 的外部事件或此处的 API 事件来更新 clonedElement。对？

  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) 尝试通过计算 transform:matrix 中的旋转来设置元素样式属性，该矩阵正确旋转图标并在文档本身中设置，但不幸的是，这是非常不稳定的。

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

我在这里想念什么？您的建议非常感谢？

非常感谢，O。

标签： csshere-api

解决方案

API 通过更改克隆的 Dom 元素的 transform 样式属性来操纵 Marker 的位置。在您的情况下clonedElement， onAttach 回调是theFather. 因此，您的 onAttach 回调应如下所示：

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

您可以查看以下示例代码，该代码每 1 秒旋转一次箭头 DomMarker。查看如何将克隆元素的引用分配给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)

推荐阅读