? ?????? ???? Paper.js? ??? ??, ??? ???, ??? ?? ??? ??????. ?????? ???? ????? ??? ??? ?????? ??? ?? ????. ?? ??? ??? ?? ???? ??? ???? ?? ?? ??? ?? ? ????. ? ??????? Paper.js? ??? ?????? ???? ??? ?????.

? ????? ?????? ??? ??? ?? ??? ??? ???? ??? ????. ?? ?????? ???? ???? ???? ??? ? ??? ?? ???? ? ???? ????.

????? ????

Paper.js? ?? ?????? onFrame??? ???? ?? ?????. ??? ?? ??? ?? ?? 60? ?????. ?? ? ?? ?? ???? ?? ?????. ?? ??? ?? ??? ????? ???? ?? ?? ??? ?? ? ????.

onFrame 處理函數(shù)還接收 event ??? ??? ??? ??? ?????. ? ???? ????? ?? ??? ???? ? ?? ??? ????.

? ??? event.count，它告訴我們處理程序執(zhí)行的次數(shù)。第二個是 event.delta，它為我們提供了自上次執(zhí)行處理程序以來經(jīng)過的總時(shí)間。第三個是 event.time?? ? ?? ??? ??? ?? ??? ??? ?????.

????? ?? ??? ?????? ??? ? ????. ? ???? ? ?? ????? ???? ?? ????? ??? ???????. ?? ??? ??????:

???

?? ?? ???? ? ? ??? ????? ?????? ???? ? ??? ?? ??? ?? ????. ???? A? ?? onFrame 處理程序時(shí)將色調(diào)增加 10 倍 event.delta。 event.delta ???? ??? ??? ??? 10? event.delta ?????. event.delta? ?? ????? 0.01? ?????. ? ?? 10? ??? ???? ?? ??? ????? ? ?? ??? ??? ????.

??? ??? ??? ? ????? 2?? ??????. event.time ?? ???? ????? ???? ?? ? ??? ?? ?????.

?? ??? ??? ? ?? ???????? ?? ?? ??? ?????? ??? ?? ????. ?? ??? ?? ?????. path.segments 返回構(gòu)成路徑的所有段的數(shù)組?？梢酝ㄟ^提供 index ?? ???? ?? ????? ???? ? ????. ? ???? ?? ?? ??? ????? ????.

???

??? Path.RegularPolygon(center, Sides, radius) 構(gòu)造函數(shù)創(chuàng)建一個正方形。 sides 參數(shù)確定多邊形的邊數(shù)。 radius 參數(shù)決定多邊形的大小。我還將 completelySelected 屬性設(shè)置為 true? ????? ?? ???? ? ? ????.

onFrame 處理程序內(nèi)，我使用 for 循環(huán)迭代所有段，并將它們的 x 坐標(biāo)設(shè)置為等于基于其索引計(jì)算的值。在 Math.sin() 函數(shù)內(nèi)使用 event.time 函數(shù)不會產(chǎn)生任何與極值相關(guān)的問題，因?yàn)?Math.sin() 的值不會產(chǎn)生任何與極值相關(guān)的問題。 sin() ??? ??? for ??? ???? ?? ????? ???? x ??? ???? ???? ??? ?? ???? ?????. Math.sin() ?? ???

??? ???? ??? ?? ??? ???? ????. Math.sin() ??? ???? ??? ??? ?????. sin() ??? ?? -1? 1 ?????.

onFrame 處理程序中的代碼。我建議您嘗試為多邊形構(gòu)造函數(shù)以及 sin?? ??? ????? ???? ?????. ??? ???? ?? ??? ???? ? ?? ???? ????. ??? ?? ?????? ?? ??? ???? ????? ??? ???? ?? ??? ?? sin ??? ?? ??? ??? ??? ????.

??? ??

img 標(biāo)簽將其添加到網(wǎng)頁的標(biāo)記中，并為其指定 id。這個 id 隨后被傳遞給 new Raster(id)Paper.js? ???? ????? ???. ?? ????? ???? ??? ? ????. ?????? ???? ????? ?? ????

???? ???? ???.

?? ?? ???? ????? ?? ????? ??? ?????? ?????? ??? ?? ?????. ?? ???? ???? ???? ???? ?? ??? ?????. ? ??????? ?? ???? ?????:

??

要訪問上圖中各個像素的顏色，您可以使用 柵格。 getPixel(x, y) 函數(shù)，其中 x 和 y 是像素的坐標(biāo)。下面的代碼生成 7*7 像素的正方形，填充位于左上角的像素的顏色：

var raster = new Raster('landscape');
var gridSize = 8;
var rectSize = 7;

raster.on('load', function() {  
  raster.size = new Size(80, 40);

  for (var y = 0; y < raster.height; y++) {
    for (var x = 0; x < raster.width; x++) {
      
      var color = raster.getPixel(x, y);
      var path = new Path.Rectangle( new Point(x, y) * gridSize, new Size(rectSize, rectSize));

      path.fillColor = color;
    }
  }

  project.activeLayer.position = view.center;
});

加載柵格后，我們將其大小調(diào)整為 80*40。像素。在嵌套的 for 循環(huán)內(nèi)，我們遍歷該柵格的各個像素并創(chuàng)建 7*7 的正方形。增加?xùn)鸥竦拇笮o我們帶來更好的結(jié)果，但執(zhí)行速度會更慢。這是最終結(jié)果，調(diào)整后的光柵在左上角可見：

<圖>

如果要隱藏調(diào)整大小后的柵格，可以將 raster.visible 屬性設(shè)置為 false。您還可以操縱生成的方塊的顏色。例如，要增加所有方塊中的紅色分量，您可以使用以下行：

path.fillColor = color + new Color(0.4,0,0);

在這種情況下，最終結(jié)果將是：

<圖>

光柵化項(xiàng)目

雖然 Paper.js 是一個矢量圖形庫，但它還允許您從現(xiàn)有項(xiàng)目創(chuàng)建光柵。為此，您必須使用 item.rasterize() 方法。光柵化后，原始項(xiàng)目本身不會從項(xiàng)目中刪除。您還可以選擇指定光柵的分辨率（以每英寸像素為單位）。下面的代碼以不同的分辨率從多邊形創(chuàng)建兩個柵格：

var aDodecagon = new Path.RegularPolygon(new Point(150, 180), 12, 30);
aDodecagon.fillColor = '#CCAAFC';
  
var dodecRasterA = aDodecagon.rasterize();
dodecRasterA.position.x += 250;
  
var dodecRasterB = aDodecagon.rasterize(150);
dodecRasterB.position.x += 500;
  
aDodecagon.scale(3);
dodecRasterA.scale(3);
dodecRasterB.scale(3);

與中間的相比，最右邊的分辨率更高的多邊形仍然很清晰。最終結(jié)果如下：

最終想法

如果您已閱讀本系列中的所有教程，您應(yīng)該擁有足夠的知識來開始使用 Paper.js。雖然學(xué)習(xí)該庫的基礎(chǔ)知識很容易，但掌握所有概念將需要您付出一些努力。每當(dāng)您需要有關(guān)某個主題的更多信息時(shí)，您可以瀏覽官方網(wǎng)站上的參考資料。

JavaScript 已成為事實(shí)上的網(wǎng)絡(luò)工作語言之一。它并非沒有學(xué)習(xí)曲線，而且還有大量的框架和庫可以讓您忙碌起來。如果您正在尋找其他資源來學(xué)習(xí)或在工作中使用，請查看我們在 Envato 市場中提供的資源。

如果您使用此庫創(chuàng)建了一些有趣的東西，請?jiān)谠u論中分享您的作品。

? ??? Paper.js ????: ????? ? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!