Tạo lưới được vẽ lại trên mỗi mức thu phóng

Question

Tôi đang cố gắng tạo lưới được vẽ lại trên mỗi mức thu phóng/pan để nó chỉ bao phủ khu vực màn hình hiện có thể xem được.

bao lưới và di chuyển-zoom-to-chuột-vị trí công việc:

• Mỗi zoomIn hoặc zoomOut vẽ một lưới dựa trên diện tích hiện nay-có thể xem được (sử dụng paper.view.bounds như là đối số cho nơi để bắt đầu vẽ lưới và số lượng ô cần thiết)

• Tôi cũng xóa mọi lưới được đặt trước đó trên mỗi lần zoomIn/Out trước khi tạo lưới mới.

Đó là khái niệm về lưới động giúp cải thiện hiệu suất vì có lưới tĩnh rất lớn có hiệu suất rất lớn. Do đó, lưới chỉ bao gồm khu vực màn hình hiện có thể xem được.

Vấn đề là các lưới là không tương đối được đặt giữa chúng.

• Những ngôi nhà-in zoom vào vị trí con chuột do đó nó thay đổi đối tượng paper.view.bounds. Thật không may là chức năng Grid-Drawing cũng sử dụng đối tượng đó để vẽ lưới, do đó các lưới không được định vị tương đối với nhau.

• Nếu tôi vẽ hình chữ nhật trên mức thu phóng 1 và sau đó tôi phóng to/thu nhỏ hình chữ nhật không còn được căn chỉnh với lưới vì lưới được đặt ở vị trí tương đối sai với lưới trước đó.

Bất kỳ ý tưởng nào?

Answer 1

Mặc dù câu trả lời của Alex có thể chính xác hơn,

tôi đã tìm ra giải pháp này, nơi tôi có thể tạo lưới điện tại một xPos/yPos rằng chắc chắn sẽ tương ứng với một vị trí Gridline.

Vì vậy yPos/xPos có bây giờ là một correctedBoundingRectLeft và correctedBoundingRectTop để vẽ tính toán của họ từ

Mã:

var drawGrid = function(boundingRect, cellSize) { 
    var vCellsNum = boundingRect.height/cellSize; 
    var hCellsNum = boundingRect.width/cellSize; 

    for (var i = 0; i <= hCellsNum; i++) { 
    var offsetXPos = Math.ceil(boundingRect.left/cellSize) * cellSize; 
    var xPos = offsetXPos + i * cellSize; 
    var topPoint = new paper.Point(xPos, boundingRect.top); 
    var bottomPoint = new paper.Point(xPos, boundingRect.bottom); 
    var line = new paper.Path.Line(topPoint, bottomPoint); 

    line.strokeColor = '#968d8d'; 
    } 

    for (var i = 0; i <= vCellsNum; i++) { 
    var offsetYPos = Math.ceil(boundingRect.top/cellSize) * cellSize; 
    var yPos = offsetYPos + i * cellSize; 
    var leftPoint = new paper.Point(boundingRect.left, yPos); 
    var rightPoint = new paper.Point(boundingRect.right, yPos); 
    var line = new paper.Path.Line(leftPoint, rightPoint); 

    line.strokeColor = '#968d8d'; 
    } 
} 

// where `30` is the cell width/height in px 
drawGrid(paper.view.bounds, 30); 

Và một Paper Sketch for the above

Answer 2

Dường như chức năng drawGrid() của bạn sẽ luôn bắt đầu từ điểm (0,0). Thay vào đó, bạn nên chuyển một điểm làm đối số để bù trừ lưới bằng số tiền thích hợp.