Question

我正在使用Ionic 3框架编写移动应用。

当用户将手指悬停在组件上方时，我想更改SVG的颜色。但是，当他将鼠标悬停在组件之外时，颜色必须保持不变。就像他会用手指画画一样。

我尝试了CSS hover，但是在离开组件后它又反向了。我尝试了离子运动的手势事件，但似乎它们都没有帮助我。（https://ionicframework.com/docs/components/#gestures）。我尝试了Angular“ mouseover”事件。它在浏览器上很好用，但根本不能用手指在移动或移动模拟器上使用。

在发生点击事件时，我在 .html 文件中使用[style]=myVariable。在 Typescript 文件中，“ myVariable”是白色的fill=#ffffff或黑色的fill=#000000。

任何人都知道如何实现这一目标？

Answer 1

好的，我找到了解决方法。

这是纯网络。

该想法是使用基本的网络事件“ touchstart”和“ touchmove”。并使用该事件获取手指的坐标。

然后使用函数“ document.elementFromPoint（x，y）”来获取手指下的元素。

应该可以直接访问“ event.target”，但是不幸的是，返回的元素始终是“ touchstart”事件期间手指下的元素。

然后，我动态更改CSS。

我们必须使用“ DomSanitizer.bypassSecurityTrustStyle（）”来执行此操作...如果您在CSS中使用了来自用户的输入，则必须这样做。就我而言，可能的值在硬编码数组中。

因此，请阅读上面的代码。

color-changing-svg.html

<svg id="colorChanginSVG" version="1.1" (touchstart)="handleMove($event) (touchmove)="handleMove($event)">
    <g transform="translate(-24.379463,-109.90178)">
    <path
        id="pixel"
        d="some-path"
        [style]=pixelColor />
      </g>
  </svg>

color-changing-svg.ts

    @Component({
      selector: 'page-color-changing-svg',
      templateUrl: 'color-changing-svg.html',
    })
    export class ColorChanginSvgPage {
          possibleColors: Array<string> = ["#ffffff", "#000000"]

          currentFingerColor="#0000ff";
          pixelColor:string="fill="+"#ff0000" 

          constructor(public sanitizer: DomSanitizer) {
          }

          handleMove(ev) {
            let currentElement = document.elementFromPoint(ev.touches[0].pageX, ev.touches[0].pageY);
            let id = currentElement.id

            if (id === "pixel"){
              this.pixelColor = this.sanitizer.bypassSecurityTrustStyle("fill:" + this.currentFingerColor)
            }
          }
    }

离子3在SVG上悬停时会更改颜色并保持不变

1 个答案: