canvas火焰动画、管线流动动画-Fabric.js

原创

已于 2022-11-23 15:46:35 修改 · 1.6k 阅读

收录于

当前文章被以下社区和专栏收录：

于 2022-11-23 15:43:48 首次发布

本文介绍了一个使用 Fabric.js 的实战案例，展示了如何通过 Vue 框架实现动态图案填充及精灵动画效果。具体包括：创建可重复图案、实现图案偏移交互、自定义精灵类并播放动画等。

官网

http://fabricjs.com/ 一个canvas框架
项目地址

效果

在这里插入图片描述

代码

<template>
  <div class="home">
    <p>
      <label>Pattern left offset</label>
      <input type="range" min="0" max="500" value="0" id="img-offset-x">
    </p>
    <canvas id="canvas" width="1565" height="929"></canvas>
  </div>
</template>

<script setup>
import {
   
   onMounted} from "vue";

let canvas, rect, patternSourceCanvas, pattern;

fabric.Sprite = fabric.util.createClass(fabric.Image, {
   
   

  type: 'sprite',

  spriteWidth:  50,
  spriteHeight: 72,
  spriteIndex: 0,
  frameTime: 100,

  initialize: function(element, options) {
   
   
    options || (options = {
   
    });

    options.width = this.spriteWidth;
    options.height = this.spriteHeight;

    this.callSup