如何在PaperJS中绘制一个简单的2D网格（非交互式）？

我有一个使用PaperJS制作的交互式应用程序样机，但它仍然缺少一个小功能。我需要绘制一个2D网格（您知道...在表面上无限重复的线条的统一网格），它将用作在屏幕上拖动东西时用户交互的指南（但网格本身可以完全静态）。如何在PaperJS中绘制一个简单的2D网格（非交互式）？

我只是不知道如何在PaperJS中实现它。它不能只是一个背景图片，因为它会以不同的比例呈现，我也希望它能够呈现得非常快，因为它总是可见的。

类型网格的我想提请是一个二维网格为中心的网格，像在实施例（一）中的图片：

2D basic grid types

任何启示是受欢迎的。

来源

2011-10-28 marcio

这似乎是一个奇怪的问题，因为纸.js似乎是绘制矢量图形的库，并且您在问如何绘制特定的图形。您是否尝试使用moveTo，lineTo，moveTo，lineTo等来制作路径？ –

我可以简单地通过使用另一个Canvas并将它放置在PaperJS之下来解决这个问题（z-index可以做到这一点）。像詹姆斯所说的那样渲染网格。 –

如果你想要的是线：

var drawGridLines = function(num_rectangles_wide, num_rectangles_tall, boundingRect) { 
    var width_per_rectangle = boundingRect.width/num_rectangles_wide; 
    var height_per_rectangle = boundingRect.height/num_rectangles_tall; 
    for (var i = 0; i <= num_rectangles_wide; i++) { 
     var xPos = boundingRect.left + i * width_per_rectangle; 
     var topPoint = new paper.Point(xPos, boundingRect.top); 
     var bottomPoint = new paper.Point(xPos, boundingRect.bottom); 
     var aLine = new paper.Path.Line(topPoint, bottomPoint); 
     aLine.strokeColor = 'black'; 
    } 
    for (var i = 0; i <= num_rectangles_tall; i++) { 
     var yPos = boundingRect.top + i * height_per_rectangle; 
     var leftPoint = new paper.Point(boundingRect.left, yPos); 
     var rightPoint = new paper.Point(boundingRect.right, yPos); 
     var aLine = new paper.Path.Line(leftPoint, rightPoint); 
     aLine.strokeColor = 'black'; 
    } 
} 

drawGridLines(4, 4, paper.view.bounds);

如果你想每个矩形是一个单独的路径则hitTest为个人矩形：

var drawGridRects = function(num_rectangles_wide, num_rectangles_tall, boundingRect) { 
    var width_per_rectangle = boundingRect.width/num_rectangles_wide; 
    var height_per_rectangle = boundingRect.height/num_rectangles_tall; 
    for (var i = 0; i < num_rectangles_wide; i++) { 
     for (var j = 0; j < num_rectangles_tall; j++) { 
      var aRect = new paper.Path.Rectangle(boundingRect.left + i * width_per_rectangle, boundingRect.top + j * height_per_rectangle, width_per_rectangle, height_per_rectangle); 
      aRect.strokeColor = 'white'; 
      aRect.fillColor = 'black'; 
     } 
    } 
} 

drawGridRects(4, 4, paper.view.bounds);

来源

2012-08-23 05:34:30 beaslera

如何在PaperJS中绘制一个简单的2D网格（非交互式）？

回答

相关问题