Работа с элементами полигона SVG
Я пытаюсь работать с полигоном SVG и JavaScript. Я создаю полигон и устанавливаю его первоначальный список точки как это:
var polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
polygon.setAttribute("points", "0,0 100,100 200,200");
теперь, что я делаю, если я хочу изменить 2-ю точку (100,100)? Прямо сейчас я в основном восстанавливаю целую строку снова. Но мы можем обратиться к "polygon.points" как к массиву так или иначе, или это - действительно просто простая простая строка? Это может работать хорошо на очень простые полигоны, но если мой полигон в конечном счете имеет сотни пар точки, я не хотел бы восстановить весь атрибут "точек" как строку каждый раз, когда я хочу изменить единственный элемент.
Спасибо
4 ответа
Никто не об этом я боюсь. Вы должны снова восстановить строку. Но не сложно обернуть все это в объекте, что-то вроде:
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
* не лучшая реализация, но вы получаете идею.
Вы можете получить доступ к отдельным значениям точки с использованием SVG DOM:
var p = polygon.points.getItem(1);
p.x = 150;
p.y = 300;
(предполагая, что ваш UA реализует этот интерфейс.) См. SVGPolyGonElement , SvganimatedPoints ], SVGPointList и SVGPoint .
Я считаю, что используя эти интерфейсы SVG DOM (по крайней мере для меня в батике, в котором я делаю большую часть своего SVG Things), часто не быстрее, чем просто обновлять атрибут со строковыми манипуляциями.
Вам нужно использовать SetAttributens . Вы, вероятно, захотите кэшировать это пространство имен в переменной где-то, так что вам не нужно их печатать.
Вам необходимо установить все точки сразу, производительность довольно прочная, то, что вы можете сделать, это управлять массивом снаружи и объединить его на вызовы SetAttribute