Đơn giản hóa chuỗi đường dẫn SVG bằng cách giảm số lượng nút

Question

Tôi đang tạo một chuỗi đường dẫn SVG lớn đại diện cho biểu đồ dạng đường.

Bên dưới biểu đồ Tôi có thanh trượt để chọn một lát phạm vi thời gian. Đằng sau thanh trượt là bản xem trước mini của toàn bộ biểu đồ đường kẻ.

Tôi hiện đang thu nhỏ đường dẫn để tạo bản xem trước tuy nhiên khi làm như vậy, tôi sẽ kết thúc với hàng chục nút trên mỗi pixel và do đó, chi tiết hơn rất cần thiết. Tất nhiên điều này cho phép trình duyệt hiển thị nhiều hơn là phải làm.

Có rất nhiều thông tin có sẵn khi nén chuỗi svg (gzipping v.v.), mặc dù ít trên các thuật toán thực sự đơn giản hóa đường dẫn bằng cách giảm các nút.

Tôi đang sử dụng Raphaeljs và đang tìm kiếm giải pháp dựa trên javascript. Bất kỳ ý tưởng?

Answer 1

Simplify.js có lẽ là những gì bạn đang chăm sóc.

Với biểu đồ đường thẳng của bạn bao gồm các đoạn đường thẳng chỉ (mà theo định nghĩa nó nên), bạn có thể sử dụng nó như thế này:

var tolerance = 3 
    var pathSegArray = [] 
    for (var i=0; i<path.pathSegList.numberOfItems; i++) { 
    pathSegArray.push(path.pathSegList.getItem(i)) 
    } 
    var newPathArray = simplify(pathSegArray,tolerance) 
    var newD = "M"; 
    for (i=0; i<newPathArray.length; i++) { 
    newD += newPathArray[i].x + " " + newPathArray[i].y + " " 
    } 
    path.setAttribute("d",newD)