如何使用fabric js向画布区域添加更新的日期和时间？

Question

我正在尝试将当前日期和时间添加到画布区域。我们可以使用对象添加当前日期和时间。但是日期和时间值不会持续更新，请为我提供一种方法，当我们单击按钮时如何将当前日期和时间添加到画布。

[添加了完整的代码，以使用结构在画布上添加时间。编写了相同的代码以将日期添加到画布区域。

//This file has a method to addTimeText which is called on the button click and moment package to get the updated time value

import { fabric } from 'fabric';
import moment from "moment";

export default {
    methods: {
        addTimeText() {
            let isMouseDown = false;
            let object = null;
            this.getFabric().on('mouse:down', ({e}) => {
                isMouseDown = true;
                const pointer = this.getFabric().getPointer(e);
                object = new fabric.TruTime('', {
                    top: pointer.y,
                    left: pointer.x,
                    width: 250,
                });

                object.on('editing:exited', () => {

                    this.afterAdding(object);
                });

                this.getFabric().add(object);
                this.getFabric().setActiveObject(object).requestRenderAll();

                object.enterEditing();
            });

        },
    }
}

//new file has content related to the above JS file 

import Helper     from "./helper";
import FabricJS   from "fabric";
import { fabric } from "fabric";
import moment from "moment";
fabric.TruTime = FabricJS.fabric.util.createClass(fabric.Textbox,
    {
        type      : "tru-text",

        initialize: function(text, options) {
            options = options || {};
            if (!options.uuid) {
                options = Helper.setDefaultProperties(
                    {
                        ...options, fill: "#000",
                        backgroundColor : "transparent",
                        fontFamily      : "Open Sans",
                        fontWeight      : 400,
                        fontFiles       : [
                            //     "assets/fonts/Roboto/Roboto.css",
                            //     "assets/fonts/Roboto/Roboto-Black.ttf",
                            //     "assets/fonts/Roboto/Roboto-BlackItalic.ttf",
                            //     "assets/fonts/Roboto/Roboto-Bold.ttf",
                            //     "assets/fonts/Roboto/Roboto-BoldItalic.ttf",
                            //     "assets/fonts/Roboto/Roboto-Italic.ttf",
                            //     "assets/fonts/Roboto/Roboto-Light.ttf",
                            //     "assets/fonts/Roboto/Roboto-LightItalic.ttf",
                            //     "assets/fonts/Roboto/Roboto-Medium.ttf",
                            //     "assets/fonts/Roboto/Roboto-MediumItalic.ttf",
                            //     "assets/fonts/Roboto/Roboto-Regular.ttf",
                            //     "assets/fonts/Roboto/Roboto-Thin.ttf",
                            //     "assets/fonts/Roboto/Roboto-ThinItalic.ttf"
                        ]
                    });
            }

            this.callSuper("initialize", text, options);
        },

        hasTag(value) {
            return [
                this.type,
                "font",
                "paragraph",
                "background",
                "position"].includes(value);
        },
        updateCurrentTime() {
            this.currentTime = moment().format('LTS');
            return this.currentTime;
        },
        toObject: function() {
            const svg = Helper.svg(this);
            const encodedSvg = btoa(svg);
            return fabric.util.object.extend(this.callSuper("toObject"),
                {
                    uuid: this.uuid,
                    svg : encodedSvg,
                    text: this.updateCurrentTime()
                });
        }
    });

fabric.TruTime.async = true;
setInterval(() => object.text = this.updateCurrentTime(), 1000);
fabric.TruTime.fromObject = (object, callback) => {
    const truTime = new fabric.TruText(object.text, object);
    callback && callback(truTime);
};

Answer 1

您可以使用this.$set来确保vue捕获了您的更改，而不是updateCurrentTime（）函数中的Assign运算符。