在本教程中，我們將學(xué)習(xí)如何使用動畫來拉直圖像
FabricJS。我們可以通過創(chuàng)建fabric.Image的實例來創(chuàng)建一個Image對象。自從
它是FabricJS的基本元素之一，我們也可以通過應(yīng)用輕松定制它
角度、不透明度等屬性。為了用動畫拉直圖像，我們使用
fxStraighten 方法。
語法
fxStraighten(callbacks: Object): fabric.Object
登錄后復(fù)制
參數(shù)
callbacks – 該參數(shù)是一個帶有回調(diào)函數(shù)的對象，可以使用
更改與動畫相關(guān)的某些屬性。
使用拉直方法
示例
讓我們看一個代碼示例，了解使用 straighten 方法時 Image 對象如何顯示
用于代替fxstraighten。這將幫助我們認(rèn)識到它們之間的區(qū)別。
straighten 方法只是straighten將對象從當(dāng)前角度旋轉(zhuǎn)到
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>
登錄后復(fù)制
使用fxstraighten方法
示例
在此示例中，我們使用了fxstraighten方法來拉直圖像對象
并顯示一個簡單的動畫。圖像對象具有 45 度角，
通過旋轉(zhuǎn)回 0 度來拉直。除此之外，onChange 函數(shù)是
在動畫的每一步都會調(diào)用，而 onComplete 函數(shù)僅在
動畫完成，這就是為什么我們的圖像對象最終被縮放
水平移動 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>
登錄后復(fù)制
以上就是如何使用 FabricJS 拉直帶有動畫的圖像？的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
