SVG полилинии манипуляции в TypeScript - PullRequest
Новая
       23

SVG полилинии манипуляции в TypeScript

0 голосов
/ 10 октября 2018

Я работаю с TypeScript 3.1.1 в VS Code с проектом Aurelia.Мне нужно манипулировать SVG Polyline в коде TypeScript.У меня проблемы с созданием нового объекта SVGPoint.Мой исходный HTML выглядит так: 

<svg class="distance-polyline-svg" width="100%" height="100%" ref="distancePolylineSvg">
    <polyline points="100,100 300,100 200,300 500,300" style="stroke: rgba(6, 28, 129, 0.3); stroke-width: 5; fill: transparent" ref="distancePolyline" />
</svg>

distancePolylineSvg объявлено как SVGElement distancePolyline объявлено как SVGPolylineElement

Я могу получить доступ к точке, используя:

this.distancePolyline.points.getItem (i); Но когда я пытаюсь создать новую точку для использования в this.distancePolyline.points.replaceItem или this.distancePolyline.points.appendItem У меня нет успеха.Я попытался новый SVGPoint () и получил ошибку конструктора.Я пробовал новый DOMPoint () , который работает, но при использовании его в replaceItem я получаю сообщение об ошибке, указывающее, что он ожидает параметр типа SVGPoint.Кастинг не работает.Ни SVGElement, ни SVGPolygonElement не имеют createSVGPoint метода и document.rootElement.createSVGPoint не работает, потому что rootElement имеет значение null.

Как создать новый SVGPoint для передачив методы SVGPointList?

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Я обновил gist.run набрав.https://gist.run/?id=040775f06aba5e955afd362ee60863aa

Как уже упоминал Роберт, вам необходимо ввести элемент <svg> в качестве SVGSVGElement.

В спецификации API SVG DOM в настоящее время отсутствует метод для получения точно типизированных элементов SVG из HTML DOM.ellements, и это отражено в TypeScript.Однако фактические объекты, возвращаемые из DOM API, на самом деле являются элементами SVG DOM.Поэтому вам нужно использовать приведение к вашим запросам HTML DOM, а затем вручную вводить их в качестве элементов SVG DOM. 

let svg: SVGSVGElement = <any>document.getElementById('svg');
let polyline: SVGPolylineElement = <any>svg.getElementById('polyline');
let point: SVGPoint = svg.createSVGPoint();
point.x = 0;
point.y = 0;
polyline.points.appendItem(point);

Использование element.ref Aurelia делает это выглядит немного чище, хотя в основном это делаетто же самое для вас.

просмотр 

<template>
  <svg element.ref="svg">
    <polyline element.ref="polyline"></polyline>
  </svg>
</template>

просмотр модели 

export class SVGViewModel {
  svg: SVGSVGElement;
  polyline: SVGPolylineElement;
  addPoint(x: number, y: number) {
    const point: SVGPoint = this.svg.createSVGPoint();
    point.x = x
    point.y = y;
    this.polyline.points.appendItem(point)
  }
}
0 голосов
/ 11 октября 2018

Ваш элемент <svg> должен быть смоделирован как SVGSVGElement, у него есть метод createSVGPoint , который возвращает объект `SVGPoint.

...