Цикл рисования с использованием js oop и svg - PullRequest
Новая
       0

Цикл рисования с использованием js oop и svg

2 голосов
/ 08 марта 2012

Я выхожу из фокуса, когда я практикую oop, и я не знаю, как продолжать.У меня есть два кода, и мне нужно объединить оба кода.Мне нужно инициализировать переменную svg, используя метод oop.

Нужна помощь.Спасибо.

ссылка svg: 

    function ArrayMaker(svgcx, svgcy ,svgr ,svgstroke ,svgstroke_width ,svgfill ) {  
    this.svgcx = 100;
    this.svgcy = 50;
    this.svgr = 40;
    this.svgstroke = "red";
    this.svgstroke_width = 3;
    this.svgfill = "yellow";
    this.theArray = [ this, svgcx ,svgcy ,svgr ,svgstroke ,svgstroke_width ,svgfill ];  
}  

ArrayMaker.prototype = {  
    someMethod: function () {  
        alert( 'someMethod called');  
    },  
    getArray: function () {  
        return this.theArray;  
    }  
};  

var am = new ArrayMaker( 'one', 'two' );  
var other = new ArrayMaker( 'first', 'second' );  

alert(am.getArray());

этот код работает: 

var cx=100;
var cy=50;
var r=40;
var stroke="red";
var stroke_width=3; 
var fill="yellow";
var htm = "<html>";
htm += "<head>";
htm += "<title>test3</title>";
htm += "</head>";
htm += "<body>";
htm += "<svg ";
htm += " version=";
htm += "\"1.1\"";
htm += ">";
htm += "<circle ";
htm += "cx="+cx+" ";
htm += "cy="+cy+" ";
htm += "r="+r+" ";
htm += "stroke="+stroke+" ";
htm += "stroke-width="+stroke_width+" ";
htm += "fill="+fill+" ";
htm += "/>";

htm += "</body>";
htm += "</html>";
document.write(htm);

Ответы [ 2 ]

3 голосов
/ 08 марта 2012

Для создания элементов SVG с помощью JS необходимо использовать createElementNS() и создавать элементы с пространством имен SVG (http://www.w3.org/1999/xhtml). Например, посмотрите эту демонстрацию на моем сайте: http://phrogz.net/SVG/svg_in_xhtml5.xhtml

var svgNS = "http://www.w3.org/1999/xhtml";
function createOn( root, name, attrs ){
  var el = document.createElementNS(svgNS,name);
  for (var attr in attrs){
    if (attrs.hasOwnProperty(attr)) el.setAttribute(attr,attrs[attr]);
  }
  return root.appendChild(el);
}
var svg = createOn( document.body, 'svg', {viewBox:'-100 -100 200 200'} );
createOn( svg, 'circle', { cx:-60, cy:-50, r:20, fill:'#000' });

Обратите внимание, что атрибуты SVG не находятся ни в каком пространстве имен, поэтому вы можете использовать setAttribute() (как я делал выше) или setAttributeNS(null,...). Однако это не так для атрибутов, указанных вне SVG, таких как XLink href. Для этого вам нужно создать атрибуты с правильным пространством имен.

2 голосов
/ 08 марта 2012

Вы должны отойти от w3schools и document.write.Они оба представляют собой старые способы ведения дел.

Phrogz ответил передо мной, но я опубликую ссылку на jsFiddle, с которым вы можете играть в любом случае.

http://jsfiddle.net/ctrlfrk/nnjsw/

Код в этой ссылке покажет вам, как правильно создать объект 'circle' и как добавить метод к прототипу (в данном случае для перемещения окружностей)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...