弃用的SVG pathSegList的替代方法 [英] Alternative for deprecated SVG pathSegList
问题描述
我正在写一个扩展折线功能的Leaflet插件。在我的插件中,我使用SVGPathSegList接口访问路径段。但根据Chrome DevTools,该界面将在Chrome 48中删除。我正在寻找另一种可能性来访问路径段。
I'm writing a Leaflet plugin that extends the polyline functionality. In the my plugin I'm accessing the path segments using the SVGPathSegList interface. But according to the Chrome DevTools the interface will be removed in Chrome 48. I'm seeking for another possibility to access the the path segments.
Here's my fiddle.
(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();
}
});
})();
推荐答案
会有一个新的API
https://svgwg.org/specs/paths/#InterfaceSVGPathData
和a polyfill
https://github.com/jarek-foksa/path- data-polyfill.js
以及旧API的polyfill
https://github.com/progers/pathseg
另请参阅官方铬错误
https://code.google.com/p/chromium/issues/detail?id=539385
there will be a new API
https://svgwg.org/specs/paths/#InterfaceSVGPathData
and a polyfill for that
https://github.com/jarek-foksa/path-data-polyfill.js
as well as a polyfill for the old API
https://github.com/progers/pathseg
Also see the official chromium bug
https://code.google.com/p/chromium/issues/detail?id=539385
这篇关于弃用的SVG pathSegList的替代方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!