Cách chính xác để vẽ các đường thẳng bằng cách sử dụng raphael.js là gì?

Question

Tôi đang gặp sự cố khi vẽ một lưới đơn giản bằng cách sử dụng raphael.js.

Tôi đang sử dụng paper.path(), và tất cả mọi thứ có vẻ tốt đẹp với chuỗi con đường của tôi:

nhưng bằng cách nào đó điều này được hiển thị:

đây là đoạn code tôi đang sử dụng để render này "lưới"

// 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); 
    } 

(Trong trường hợp này cellSize = 50, và this._offset = {x: 0, y: 0})

Answer 1

Vấn đề là bạn đang giả định l có một tọa độ tuyệt đối, nhưng nó thực sự là một tọa độ tương đối. Khi bạn viết:

M 50 0 l 50 600 

Bạn đang nghĩ nó có nghĩa viết một dòng từ (50,0) đến (50, 600) nhưng nó thực sự có nghĩa bắt đầu tại (50, 0), di chuyển (50 , 600). Do đó lưới nghiêng.

Bạn chỉ cần viết vpaths như thế này (thay thế x và y sau l với):

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

và:

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