Question

是否可以在 fabricjs 画布

中加载 Lottie 动画

我尝试了以下示例

    bodymovin.loadAnimation({
          wrapper: animateElement,       // div element
          loop: true,
          animType: 'canvas',            // fabricjs canvas
          animationData: dataValue,      // AE json
          rendererSettings: {
             scaleMode: 'noScale',
             clearCanvas: true, 
             progressiveLoad: false, 
             hideOnTransparent: true,
           }
       });
canvas.add(bodymovin);
canvas.renderAll();

我无法在动画js画布中添加动画。如果有人克服了这个问题，请对此发表评论

Answer 1

我可以这样假设，那就是将您的代码与类似https://itnext.io/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d的代码进行组合。根据您的情况，您可能可以使用类似http://fabricjs.com/interaction-with-objects-outside-canvas

的方法

Answer 2

我可能回答这个问题的时间太晚了，但是对于其他人，这支笔可能会给您一些指示：https://codepen.io/shkaper/pen/oEKEgG

首先，这里的想法是扩展fabric.Image类，重写其内部render方法，以呈现您自己提供的任意画布的内容：

package com.journaldev.files;

import java.io.BufferedWriter;
import java.io.File;
import java.io.FileOutputStream;
import java.io.FileWriter;
import java.io.IOException;
import java.io.OutputStream;
import java.nio.file.Files;
import java.nio.file.Paths;

public class WriteFile {

    /**
     * This class shows how to write file in java
     * @param args
     * @throws IOException 
     */
    public static void main(String[] args) {
        String data = "I will write this String to File in Java";
        int noOfLines = 10000;
        writeUsingFileWriter(data);

        writeUsingBufferedWriter(data, noOfLines);

        writeUsingFiles(data);

        writeUsingOutputStream(data);
        System.out.println("DONE");
    }

    /**
     * Use Streams when you are dealing with raw data
     * @param data
     */
    private static void writeUsingOutputStream(String data) {
        OutputStream os = null;
        try {
            os = new FileOutputStream(new File("/Users/pankaj/os.txt"));
            os.write(data.getBytes(), 0, data.length());
        } catch (IOException e) {
            e.printStackTrace();
        }finally{
            try {
                os.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * Use Files class from Java 1.7 to write files, internally uses OutputStream
     * @param data
     */
    private static void writeUsingFiles(String data) {
        try {
            Files.write(Paths.get("/Users/pankaj/files.txt"), data.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Use BufferedWriter when number of write operations are more
     * It uses internal buffer to reduce real IO operations and saves time
     * @param data
     * @param noOfLines
     */
    private static void writeUsingBufferedWriter(String data, int noOfLines) {
        File file = new File("/Users/pankaj/BufferedWriter.txt");
        FileWriter fr = null;
        BufferedWriter br = null;
        String dataWithNewLine=data+System.getProperty("line.separator");
        try{
            fr = new FileWriter(file);
            br = new BufferedWriter(fr);
            for(int i = noOfLines; i>0; i--){
                br.write(dataWithNewLine);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }finally{
            try {
                br.close();
                fr.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * Use FileWriter when number of write operations are less
     * @param data
     */
    private static void writeUsingFileWriter(String data) {
        File file = new File("/Users/pankaj/FileWriter.txt");
        FileWriter fr = null;
        try {
            fr = new FileWriter(file);
            fr.write(data);
        } catch (IOException e) {
            e.printStackTrace();
        }finally{
            //close resources
            try {
                fr.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

}

您可以将此画布设为构造函数参数，例如

fabric.AEAnimation = fabric.util.createClass(fabric.Image, {
  drawCacheOnCanvas: function(ctx) {
    ctx.drawImage(this._AECanvas, -this.width / 2, -this.height / 2);
  },
})

然后，您只需要使用lottie的画布渲染器在画布上绘制动画并将其传递到新的fabric.AEAnimation对象。

Fabric.js画布中的Lottie动画

2 个答案: