Относительное расположение объектов Рафаэля - PullRequest
Новая
       0

Относительное расположение объектов Рафаэля

2 голосов
/ 14 августа 2011

Недавно я возился с Raphael.js и столкнулся с проблемой, связанной с положением каждого объекта Raphael.

Я хочу создать произвольное количество «холстов», но расположить их в элементе div, уже размещенном на странице. Я пытался найти способ заставить их вести себя как элемент блока, но не нашел ответа. Каждый новый объект Рафаэля находится вне любого div.

Вот HTML: 

...
#content{height:100%; width:980px; margin:0 auto;}
</style>
</head>
<body>
    <div id="content"></div>
...

и JavaScript: 

var previews = [];
var prevSize = 25;
var spacing = 10;

//get container
var container =  document.getElementById('content');

//get container width
var containerWidth = parseInt(getComputedStyle(container,"").getPropertyValue('width'));

var prevsPerRow =containerWidth/(prevSize+spacing);
var rowsPerPage = 20;

for(var y=0; y<rowsPerPage-1; y++){
    for(var x=0; x<prevsPerRow; x++){
        var preview = Raphael((x*prevSize)+(x*spacing), (y*prevSize)+(y*spacing),prevSize, prevSize);
        previews.push(preview);
    }
}

for(var x=0; x<previews.length-1; x++){
    var temp = previews[x];
    var rectangle =temp.rect(0,0,prevSize,prevSize);
    rectangle.attr('fill','black');
}

Одним из решений, которое я рассматривал, было просто добавление смещения желаемого div к координатам x и y объекта, но это не кажется лучшим решением.

Спасибо за помощь!

edit: вот jsfiddle, чтобы помочь объяснить, что именно я имею в виду. http://jsfiddle.net/xpNBr/

Ответы [ 2 ]

4 голосов
/ 29 апреля 2013

Ну, это на два года позже, но я не вижу здесь ответа. Так что для потомков и будущих искателей: я бы использовал фабричные методы Id элемента или элемента, предоставленные Raphael, как описано здесь .

С этой страницы: 

// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
    type: "rect",
    x: 10,
    y: 10,
    width: 25,
    height: 25,
    stroke: "#f00"
}, {
    type: "text",
    x: 30,
    y: 40,
    text: "Dump"
}]);
0 голосов
/ 16 августа 2011

Вы можете использовать разные контейнеры для каждого вновь созданного canvas .
Вот рабочий пример использования функции addCanvas для создания каждого нового элемента:

http://jsfiddle.net/creaweb/KtNPS/5/

Обратите внимание, что расстояние между блоками холста определяется в CSS, а также их размер.

...