बहिष्कृत एसवीजी पथ के लिए वैकल्पिक Seglist

Question

मैं एक पत्रक प्लगइन लिख रहा हूं जो पॉलीलाइन कार्यक्षमता को बढ़ाता है। मेरी प्लगइन में मैं SVGPathSegList इंटरफ़ेस का उपयोग कर पथ सेगमेंट तक पहुंच रहा हूं। लेकिन क्रोम DevTools के अनुसार इंटरफ़ेस क्रोम 48 में हटा दिया जाएगा। मैं पथ खंडों तक पहुंचने की एक और संभावना की तलाश कर रहा हूं।

Here's मेरी बेला।

(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(); 
     } 
    }); 
})(); 

Answer 1

एक नए API
https://svgwg.org/specs/paths/#InterfaceSVGPathData
और उस
https://github.com/jarek-foksa/path-data-polyfill.js
के लिए एक polyfill के साथ-साथ पुराने API के लिए एक polyfill होगा
https://github.com/progers/pathseg
इसके अलावा सरकारी क्रोमियम बग देख
https://code.google.com/p/chromium/issues/detail?id=539385

Answer 2

@holg er-will कुछ बहुत उपयोगी लिंक दिया जाएगा।

आप new API का उपयोग करने के लिए अपने जेएस कोड को संशोधित कर सकते हैं।

उदाहरण के लिए:
पुराने var segs = path.pathSegList के बजाय var pathData = path.getPathData() का उपयोग करें;
उपयोग pathData[1].values[4] बजाय पुराने path.pathSegList.getItem(1).x
उपयोग की path.setPathData(pathData) वर्ष path.pathSegList.appendItem/insertItem/removeItem

के बजाय पथ तत्व अद्यतन करने के लिए ब्राउज़र के लिए path-data-polyfill.js जो नए एपीआई समर्थित नहीं है को शामिल करें।
(क्रोम 50 अभी भी getPathData और setPathData लागू किया गया है नहीं एक लंबा रास्ता हो सकता है ...।)

यहाँ एक कोड नमूना है:

//svg code: 
//... 
//<path d="M0,0 L100,50" id="mypath"></path> 
//<script xlink:href="/js/path-data-polyfill.js"></script> 
//... 

//js code: 
var path = document.getElementById('mypath'); 
var pathdata = path.getPathData(); 
console.log(pathdata); 
console.log(pathdata.length); //2 
console.log(pathdata[0].type); //"M" 
console.log(pathdata[0].values); //[0,0] 
console.log(pathdata[1].type); //"L" 
console.log(pathdata[1].values); //[100,50] 
pathdata.push({type: "C", values: [100,-50,200,150,200,50]}); //add path segment 
path.setPathData(pathdata); //set new path data 
console.log(path.getAttribute('d')); //"M0,0 L100,50 C100,-50,200,150,200,50" 

पथ डेटा polyfill: https://github.com/jarek-foksa/path-data-polyfill.js