ионные 3 меняют цвет при наведении на svg и остаются прежними - PullRequest
Новая
       10

ионные 3 меняют цвет при наведении на svg и остаются прежними

0 голосов
/ 19 сентября 2018

Я пишу мобильное приложение с платформой Ionic 3.

Я хочу изменить цвет SVG, когда пользователь наводит курсор на компонент пальцем.Но цвет должен остаться, когда он зависает над компонентом.Это как если бы он рисовал пальцем.

Я попробовал CSS hover, но после выхода из компонента все изменилось.Я попробовал событие жестов ionic, но мне кажется, что ни один из них не помог мне. (https://ionicframework.com/docs/components/#gestures). Я попробовал событие Angular "mouseover". Оно отлично работает в браузере, но никак не с пальцем на мобильном или мобильномсимулятор.

При событии щелчка я использую [style]=myVariable в файле .html . Где «myVariable» равен fill=#ffffff для белого или fill=#000000 для черного в Машинопись файл.

У кого-нибудь есть идеи, как этого добиться?

1 Ответ

0 голосов
/ 24 сентября 2018

Хорошо, я нашел РЕШЕНИЕ.

Это чистый веб.

Идея состоит в том, чтобы использовать базовое веб-событие "touchstart" и "touchmove".И использовать событие, чтобы получить координаты пальца.

Затем используйте функцию «document.elementFromPoint (x, y)», чтобы получить элемент под пальцем.

Должен быть прямой доступ к «event.target», но, к сожалению,возвращаемый элемент всегда является элементом, который находился под пальцем во время события «touchstart».

Затем я динамически меняю CSS.

Для этого мы должны использовать «DomSanitizer.bypassSecurityTrustStyle ()» ... Этого не должно быть, если вы используете ввод от пользователя в CSS.В моем случае возможные значения находятся в жестко заданном массиве.

Итак, прочитайте приведенный выше код.

color-change-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>

изменение цвета-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)
            }
          }
    }
...