如何使用 FabricJS 拉直帶有動畫的圖像？
- WBOY轉載
- 2023-09-13 21:41:06980瀏覽
在本教程中，我們將學習如何使用動畫來拉直圖像 FabricJS。我們可以透過建立fabric.Image的實例來建立一個Image物件。自從 它是FabricJS的基本元素之一，我們也可以透過應用輕鬆自訂它 角度、不透明度等屬性。為了用動畫拉直圖像，我們使用 fxStraighten 方法。
文法
fxStraighten(callbacks: Object): fabric.Object
參數
callbacks - 此參數是一個有回呼函數的對象，可以使用 更改與動畫相關的某些屬性。
使用拉直方法
#範例
讓我們來看一個程式碼範例，了解使用 straighten 方法時 Image 物件如何顯示 用來代替fxstraighten。這將幫助我們認識到它們之間的差異。 straighten 方法只是straighten將物件從目前角度旋轉到 0、90,180、270 等，取決於哪一個更接近。然而，fxstraighten適用於 同樣的方式，但有動畫。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the Straighten method</h2>
<p>
You can see that there is no animation but the image has been straightened
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 10,
left: 110,
skewX: 15,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using the straighten method
image.straighten();
</script>
</body>
</html>
使用fxstraighten方法
範例
在此範例中，我們使用了fxstraighten方法來拉直圖像對象 並顯示一個簡單的動畫。影像物件具有 45 度角， 透過旋轉回 0 度來拉直。除此之外，onChange 函數是 在動畫的每一步都會調用，而 onComplete 函數僅在 動畫完成，這就是為什麼我們的圖像物件最終被縮放 水平移動 1.5 倍並向左移動 130 的值。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the fxStraighten method</h2>
<p>
You can see that the image gets straightened while also displaying an animation
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 10,
left: 110,
skewX: 15,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using fxStraighten method
image.fxStraighten({
onChange() {
canvas.renderAll();
},
onComplete() {
image.set("left", 130);
image.set("scaleX", 1.5);
canvas.renderAll();
},
});
</script>
</body>
</html>
以上是如何使用 FabricJS 拉直帶有動畫的圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除