Alternative für veraltet SVG pathSegList
Ich Schreibe ein Leaflet-plugin, das erweitert die polyline-Funktionalität. In meinem plugin, das ich bin, der Zugriff auf den Pfad-Segmente mit dem SVGPathSegList-Schnittstelle. Aber laut den Chrome-DevTools, wird die Schnittstelle entfernt in Chrom 48. Ich Suche eine andere Möglichkeit, um Zugang zu der Pfad-Segmente.
Hier meine Geige.
(function () {
var __onAdd = L.Polyline.prototype.onAdd,
__onRemove = L.Polyline.prototype.onRemove,
__updatePath = L.Polyline.prototype._updatePath,
__bringToFront = L.Polyline.prototype.bringToFront;
L.Polyline.include({
onAdd: function (map) {
__onAdd.call(this, map);
this._textRedraw();
},
onRemove: function (map) {
__onRemove.call(this, map);
},
bringToFront: function () {
__bringToFront.call(this);
this._textRedraw();
},
_textRedraw: function () {
var textNodes = this._path.parentElement.getElementsByTagName('text'),
tnIndex;
if (textNodes.length > 0) {
for (tnIndex = textNodes.length - 1; tnIndex >= 0; tnIndex -= 1) {
textNodes[tnIndex].parentNode.removeChild(textNodes[tnIndex]);
}
}
if (this.options.measurements) {
this.setText();
}
},
setText: function () {
var path = this._path,
points = this.getLatLngs(),
pathSeg,
prevPathSeg,
center,
angle,
rotation,
textNode;
/*
* If not in SVG mode or Polyline not added to map yet return
* setText will be called by onAdd, using value stored in this._text
*/
if (!L.Browser.svg || typeof this._map === 'undefined') {
return this;
}
for (pathSeg = 0; pathSeg < path.pathSegList.length; pathSeg += 1) {
if (pathSeg > 0) {
prevPathSeg = path.pathSegList[pathSeg - 1];
center = this._calcCenter(
prevPathSeg.x,
prevPathSeg.y,
path.pathSegList[pathSeg].x,
path.pathSegList[pathSeg].y
);
angle = this._calcAngle(
prevPathSeg.x,
prevPathSeg.y,
path.pathSegList[pathSeg].x,
path.pathSegList[pathSeg].y
);
rotation = 'rotate(' + angle + ' ' +
center.x + ',' + center.y + ')';
debugger;
textNode = document
.createElementNS('http://www.w3.org/2000/svg', 'text');
textNode.setAttribute('text-anchor', 'middle');
textNode.setAttribute('x', center.x);
textNode.setAttribute('y', center.y);
textNode.setAttribute('transform', rotation);
textNode.textContent = points[pathSeg - 1]
.distanceTo(points[pathSeg]);
this._path.parentElement.appendChild(textNode);
} else {
continue;
}
}
},
_calcCenter: function (x1, y1, x2, y2) {
return {
x: (x1 + x2) / 2,
y: (y1 + y2) / 2
}
},
_calcAngle: function (x1, y1, x2, y2) {
return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
},
_updatePath: function () {
__updatePath.call(this);
this._textRedraw();
}
});
})();
es wird eine neue API - svgwg.org/specs/paths/#InterfaceSVGPathData und ein polyfill für das github.com/jarek-foksa/path-data-polyfill sowie ein polyfill für die alte API - github.com/progers/pathseg siehe Auch die offiziellen chromium-bug - code.google.com/p/chromium/issues/detail?id=539385
Hier ist die aktualisierte version meiner Geige.
Hier ist die aktualisierte version meiner Geige.
InformationsquelleAutor CG_FD | 2015-12-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
@holger-werden gab einige sehr nützliche links.
Können Sie ändern Ihre js-code zu verwenden, der neue API.
beispielsweise:
Verwenden
var pathData = path.getPathData()
anstelle der altenvar segs = path.pathSegList
;Verwenden
pathData[1].values[4]
anstelle der altenpath.pathSegList.getItem(1).x
Verwenden
path.setPathData(pathData)
zum aktualisieren der path-element anstelle der altenpath.pathSegList.appendItem/insertItem/removeItem
Gehören die path-data-polyfill.js für Browser, die nicht unterstützt die neue API.
(Chrom 50 immer noch nicht implementiert hat
getPathData
undsetPathData
. Es kann ein langer Weg...)Hier ist ein code-Beispiel:
Pfad-Daten polyfill: https://github.com/jarek-foksa/path-data-polyfill
InformationsquelleAutor cuixiping