Estoy tratando de trabajar con una SVG polígono y javascript. Puedo crear un polígono, y establecer su punto inicial lista como esta:

var polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
polygon.setAttribute("points", "0,0  100,100 200,200");

ahora ¿qué hago si quiero modificar el 2º punto (100,100)? Ahora mismo estoy básicamente de la reconstrucción de toda la cadena de nuevo. Pero, ¿podemos abordar el «polígono.puntos» como una matriz de alguna manera, o es que en realidad sólo una llanura de cadena simple? Esto puede funcionar bien para muy polígonos simples, pero si mi polígono, finalmente, tiene cientos de punto de pares, no me gustaría para reconstruir la totalidad de «puntos» atributo como una cadena cada vez que quiero modificar un solo elemento.

Gracias

InformationsquelleAutor user246114 | 2010-01-28

4 Comentarios

  1. 6

    No hay manera alrededor de ella, tengo miedo. Usted tiene que reconstruir la cadena de nuevo. Pero no es difícil envolver toda la cosa, en un objeto, algo así como:

    function Polygon () {
    var pointList = [];
    this.node = document.createElementNS('http://www.w3.org/2000/svg','polygon');
    function build (arg) {
    var res = [];
    for (var i=0,l=arg.length;i<l;i++) {
    res.push(arg[i].join(','));
    }
    return res.join(' ');
    }
    this.attribute = function (key,val) {
    if (val === undefined) return node.getAttribute(key);
    node.setAttribute(key,val);
    }
    this.getPoint = function (i) {return pointList[i]}
    this.setPoint = function (i,x,y) {
    pointList[i] = [x,y];
    this.attribute('points',build(pointList));
    }
    this.points = function () {
    for (var i=0,l=arguments.length;i<l;i+=2) {
    pointList.push([arguments[i],arguments[i+1]]);
    }
    this.attribute('points',build(pointList));
    }
    //initialize 'points':
    this.points.apply(this,arguments);
    }
    var polygon = new Polygon(0,0, 100,100, 200,200);
    polygon.setPoint(0, 50,10); //set point and automatically re-build points
    polygon.points(50,50, 50,100, 200,100); //set everything
    polygon.node; //refer to the actual SVG element

    * no es la mejor aplicación, pero usted consigue la idea.

    • Gracias se ve genial, veo lo que quieres decir. Voy a tratar de aplicar un optimizado uno, a continuación, en la parte superior de un ‘vainilla’ representación.
    • Si ejecuto este código en Chrome 58, me sale un error «no detectada ReferenceError: nodo no está definido». Esto sucede sólo en el Chrome dev consola también, así que creo que es inherente en el código
    • Se supone que para ser this.node. Este código nunca fue destinado a ser utilizado como es. Es para ilustrar la idea de que se puede implementar fácilmente el código para manejar polígonos de sí mismo.
    • Gracias agradezco 🙂 Sólo quería apuntar!
  2. 27

    Puede acceder el individuo los valores de punto utilizando el SVG DOM:

    var p = polygon.points.getItem(1);
    p.x = 150;
    p.y = 300;

    (Suponiendo que la UA implementa esta interfaz.) Ver SVGPolygonElement, SVGAnimatedPoints, SVGPointList y SVGPoint.

    Me encuentro a pesar de que el uso de estas SVG interfaces de DOM (al menos para mí en Batik, en el que hago la mayoría de mis SVG cosas) no es a menudo más rápido que con solo actualizar el atributo con la manipulación de cadenas.

  3. 1

    Necesita utilizar setAttributeNS. Usted probablemente querrá caché de ese espacio de nombres en una variable en algún lugar, así que usted no tiene que seguir escribiendo.

    • ¿Tenemos que usar setAttributeNS / getAttributeNS cualquier momento estamos establecimiento de un atributo con un elemento SVG? Por ejemplo, incluso si queremos modificar la ‘x’ parámetro de un rect? (rect.setAttributeNS(ns, ‘x’, 22)? Gracias
    • no, el uso de setAttribute() está bien.
  4. 0

    Deberá establecer todos los puntos a la vez, el rendimiento es bastante sólida, lo que puede hacer es administrar la matriz fuera de mezcla y en el setAttribute llamadas

    • Ok, así que, si quiero una solución genérica, con el fin de modificar el N-ésimo par, es necesario analizar la cadena de mí mismo, encontrar, entonces modificarlo. Que tipo de apesta, pero supongo que puedo mantener el punto de pares como una estructura separada, tipo de hedores que la hizo como que! Gracias

Dejar respuesta

Please enter your comment!
Please enter your name here