web_qp_phone_ui/public/static/plugins/js/cesiumPlugins/materialDynamicImage.js

(function () {
    function createDynamicImage(opt) {
        let that = this;
        // opt = {
        //     imageWidth: 1000,
        //     imageHeight: 500,
        //     canvasWidth: 1000,
        //     canvasHeight: 500,
        //     period: 4,
        //     text:"请18号前往14号服务台"
        // }

        for (const key in opt) {
            if (Object.hasOwnProperty.call(opt, key)) {
                this[key] = opt[key];
            }
        }
        this.beforeTime = new Date().getTime();
        this.time = new Date().getTime();
        this.period = this.period * 1000 // 循环周期，单位：秒
        // this.interval = this.interval*1000 // 时间间隔，单位：秒
        // this.text = "请18号"
        this.textImage = this.createTextImage();
        // this.canvas = this.createCanvas();


        return new Promise((resolve, reject) => {
            that.textImage.onload = function () {
                let t = new Cesium.ImageMaterialProperty({
                    // image: new Cesium.CallbackProperty(that.drawCanvas.bind(that), false),
                    image: that.textImage,
                    transparent: true
                })
                resolve(t)
            }
        });
    }

    createDynamicImage.prototype.createTextImage = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.imageWidth || 1000;
        canvas.height = this.imageHeight || 500;
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = this.textStyle;
        context.fillStyle = "red";
        context.fillText(this.text, 0, 100);
        let img = new Image();
        img.src = canvas.toDataURL("image/png");
        // img.src = "/static/image/skyscenery/cloud.png"

        // let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        // let link = document.createElement("a");
        // let blob = dataURLtoBlob(image);
        // let objurl = URL.createObjectURL(blob);
        // link.download = "scene.png";
        // link.href = objurl;
        // link.click();
        // function dataURLtoBlob(dataurl) {
        //     let arr = dataurl.split(','),
        //         mime = arr[0].match(/:(.*?);/)[1],
        //         bstr = atob(arr[1]),
        //         n = bstr.length,
        //         u8arr = new Uint8Array(n);
        //     while (n--) {
        //         u8arr[n] = bstr.charCodeAt(n);
        //     }
        //     return new Blob([u8arr], {
        //         type: mime
        //     });
        // };

        // canvas.style.position = "absolute"
        // canvas.style.top = "0px"
        // canvas.style.left = "0px"
        // canvas.style.zIndex = "1"

        // document.body.appendChild(canvas)
        return img
    }

    createDynamicImage.prototype.createCanvas = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.canvasWidth || 1000;
        canvas.height = this.canvasHeight || 500;

        canvas.style.position = "absolute"
        canvas.style.top = "0px"
        canvas.style.left = "0px"
        canvas.style.zIndex = "1"

        document.body.appendChild(canvas)
        return canvas
    }
    createDynamicImage.prototype.beforeTime = null
    createDynamicImage.prototype.drawCanvas = function () {
        let that = this;
        let goTime = new Date().getTime() - that.time;
        // if (new Date().getTime() - this.beforeTime < 400) {
        //     return this.canvas;
        // } else {
        //     this.beforeTime = new Date().getTime()
        // }
        // let ctx = that.canvas.getContext("2d");
        var canvas = document.getElementById("canvas-b");
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight);
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#000000";
        ctx.fill();
        // img	    规定要使用的图像、画布或视频。	

        // sx	    开始剪切的 x 坐标位置。
        // sy	    开始剪切的 y 坐标位置。

        // swidth	被剪切图像的宽度。
        // sheight	被剪切图像的高度。

        // x	    在画布上放置图像的 x 坐标位置。
        // y	    在画布上放置图像的 y 坐标位置。

        // width	要使用的图像的宽度（伸展或缩小图像）。
        // height	要使用的图像的高度（伸展或缩小图像）。

        /* context.drawImage(
            img, 
            sx, sy,           // 图片裁剪起始位置
            swidth, sheight,  // 被剪切图像的宽高
            x, y,             // 图像放置在画布
            width, height) */

        let xhCount = parseInt(goTime / that.period); // 循环次数
        let syTime = goTime - xhCount * that.period; // 当前已进行时间

        let nowRW = that.canvasWidth * syTime / that.period // 本次循环图片的已展示的宽度
        let beforeRW = that.canvasWidth * (1 - syTime / that.period) // 上次循环图片的剩余宽度

        // ctx.clearRect(0, 0, canvas.width, canvas.height);
        // ctx.font = 'italic 40pt Calibri';
        // ctx.fillStyle = "red";
        // ctx.fillText(Cesium.JulianDate.toDate(Cesium.JulianDate.now()).getTime(), 20, 100);

        // this.textImage.onload = function () {
        // 绘制上次循环
        if (xhCount > 0) {
            ctx.drawImage(this.textImage,
                nowRW, 0,
                beforeRW, that.imageHeight,
                0, 0,
                beforeRW, that.imageHeight);
        }
        // 绘制本次循环图片
        ctx.drawImage(this.textImage,
            0, 0,
            nowRW, that.imageHeight,
            beforeRW, 0,
            nowRW, that.imageHeight);
        // }
        return canvas.toDataURL("image/png");;
    }
    Cesium.createDynamicImage = createDynamicImage
})();