Paper.js入門指南：動畫和圖像

到目前為止，在本系列中，我已經介紹了 Paper.js 中的項目和項目、路徑和幾何圖形以及使用者互動。該庫還允許您為項目中的各種項目製作動畫。如果將其與根據使用者輸入進行操作的能力相結合，您可以創建一些非常酷的效果。本教學將介紹如何在 Paper.js 中為項目設定動畫。

本教學的後面部分也將介紹影像處理以及如何處理單一像素的顏色。該庫還使您能夠從向量建立柵格，這將在最後介紹。

動畫基礎

Paper.js 中的所有動畫都由 onFrame 事件處理程序處理。處理程序內的程式碼每秒執行最多 60 次。每次執行後視圖都會自動重繪。逐漸改變函數內部的一些屬性可以創造一些非常好的效果。

onFrame 處理函數也接收 event 物件。該物件具有三個屬性，為我們提供與動畫相關的資訊。

第一個是 event.count，它告訴我們處理程式執行的次數。第二個是 event.delta，它為我們提供了自上次執行處理程序以來經過的總時間。第三個是 event.time，它為我們提供了自第一幀事件以來經過的時間。

您可以在處理程序中為許多屬性設定動畫。在我們的範例中，我將旋轉三個矩形並更改中心矩形的色調。考慮下面的程式碼：

var rectA = new Path.Rectangle({
  point: [300, 100],
  size: [200, 150],
  strokeColor: 'yellow',
  strokeWidth: 10
});

var rectB = rectA.clone();
rectB.strokeColor = 'orange';
rectB.scale(0.8);
var rectC = rectA.clone();
rectC.strokeColor = 'black';
rectC.scale(1.2);

function onFrame(event) {
  rectA.strokeColor.hue += 10 * event.delta;
  rectA.rotate(2);
  rectB.rotate(2);
  rectC.rotate(2);
}

從上面的程式碼片段可以明顯看出，為矩形設定動畫所需的實際程式碼非常少。對於矩形 A，我們在每次執行 onFrame 處理程序時將色調增加 10 倍 event.delta。 event.delta 的值一般會接近 0.01。如果我沒有將其值乘以 10，則需要很長時間才能注意到顏色的變化。

每次執行程式碼時，我都會將每個矩形旋轉 2 度。如果我們使用值 event.time 來旋轉矩形，一段時間後旋轉會變得非常快。

<图>

您也可以為各個片段設定動畫，而不是一次為整個路徑或專案設定動畫。這個過程本身非常簡單。您可以使用 path.segments 傳回構成路徑的所有區段的陣列。可以透過提供 index 值來存取各個段。在進一步討論之前，我希望您先看看下面的程式碼。

var aSquare = new Path.RegularPolygon(new Point(550, 200), 4, 100);
aSquare.fillColor = 'pink';
aSquare.fullySelected = true;

function onFrame(event) {
  for (var i = 0; i <= 3; i++) {
    var sinValue = Math.sin(event.time * 4 + i);
    
    aSquare.segments[i].point.x = sinValue * 100 + 350;
  }
  aSquare.segments[1].point.y = sinValue * 50 + 100;
}

在這裡，我們首先使用 Path.RegularPolygon(center, Sides, radius) 建構子建立一個方塊。 sides 參數決定多邊形的邊數。 radius 參數決定多邊形的大小。我還將 completelySelected 屬性設為 true，以便您可以看到各個點。

在 onFrame 處理程序內，我使用 for 迴圈迭代所有段，並將它們的 x 座標設為等於基於其索引計算的值。在Math.sin() 函數內使用event.time 函數不會產生任何與極值相關的問題，因為Math.sin() 的值不會產生任何與極端值相關的問題。 sin() 函數將永遠位於 -1 和 1 之間。

以下示範顯示了我們的動畫方塊，順便說一下，它不再是正方形，這要歸功於我們的 onFrame 處理程序中的程式碼。我建議您嘗試為多邊形建構函數以及 sin 函數的參數嘗試不同的值，看看它們如何影響演示中的最終動畫。 <​​/p> <图>

圖片基礎

#Paper.js 中的影像稱為柵格。您可以像任何其他項目一樣變換和移動它們。要在專案中使用圖像，您首先必須使用常用的 img 標籤將其新增至網頁的標記中，並為其指定 id。這個 id 隨後被傳遞給 new Raster(id) 建構子。

請記住，您正在使用的圖像需要已加載，並且應託管在與您的專案相同的網站上。使用其他網域上託管的映像將導致安全性錯誤。在本教程中，我們將操作以下圖像：

#

要访问上图中各个像素的颜色，您可以使用 栅格。 getPixel(x, y) 函数，其中 x 和 y 是像素的坐标。下面的代码生成 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;
});

加载栅格后，我们将其大小调整为 80*40。像素。在嵌套的 for 循环内，我们遍历该栅格的各个像素并创建 7*7 的正方形。增加栅格的大小会给我们带来更好的结果，但执行速度会更慢。这是最终结果，调整后的光栅在左上角可见：

<图>

如果要隐藏调整大小后的栅格，可以将 raster.visible 属性设置为 false。您还可以操纵生成的方块的颜色。例如，要增加所有方块中的红色分量，您可以使用以下行：

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

在这种情况下，最终结果将是：

<图>

光栅化项目

虽然 Paper.js 是一个矢量图形库，但它还允许您从现有项目创建光栅。为此，您必须使用 item.rasterize() 方法。光栅化后，原始项目本身不会从项目中删除。您还可以选择指定光栅的分辨率（以每英寸像素为单位）。下面的代码以不同的分辨率从多边形创建两个栅格：

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

与中间的相比，最右边的分辨率更高的多边形仍然很清晰。最终结果如下：

最终想法

如果您已阅读本系列中的所有教程，您应该拥有足够的知识来开始使用 Paper.js。虽然学习该库的基础知识很容易，但掌握所有概念将需要您付出一些努力。每当您需要有关某个主题的更多信息时，您可以浏览官方网站上的参考资料。

JavaScript 已成为事实上的网络工作语言之一。它并非没有学习曲线，而且还有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用，请查看我们在 Envato 市场中提供的资源。

如果您使用此库创建了一些有趣的东西，请在评论中分享您的作品。

以上是Paper.js入門指南：動畫和圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章！