Каков правильный способ рисования прямых линий с помощью raphael.js?

Question

У меня возникли проблемы с рисованием простой сетки с помощью raphael.js.

Я использую paper.path(), и все выглядит нормально с моими путями струнами:

, но как-то это визуализируется:

вот код, я использую чтобы сделать эту "сетку"

// vertical lines 
    for(var x = (this._offset.x % cellSize); x < this.width; x += cellSize){ 
     var vpath = "M " + x + " 0 l " + x + " " + this.height + " z"; 
     var vline = paper.path(vpath); 
    } 
    // horizontal lines 
    for(var y = (this._offset.y % cellSize); y < this.height; y += cellSize){ 
     var hpath = "M 0 " + y + " l " + this.width + " " + y + " z"; 
     var hline = paper.path(hpath); 
    } 

(в данном случае cellSize = 50, и this._offset = {х: 0, Y: 0})

Answer 1

Проблема в том, что вы принимаете . L принимает абсолютную координату, но на самом деле принимает относительную. Когда вы пишете:

M 50 0 l 50 600 

Вы думаете, это означает, что написать строку из (50,0) до (50, 600) но это на самом деле означает начало в точке (50, 0), перемещение (50 , 600). Отсюда и перекошенная сетка.

Вам просто нужно написать vpaths, как это (замена х и у после л с):

var vpath = "M " + x + " 0 l 0 " + this.height + " z"; 

и:

var hpath = "M 0 " + y + " l " + this.width + " 0 z";