ThingJS-securityHtml/安防展/js/canvas.js

/**
 * 创建页面元素
 * @param {String} value - 页面元素类型
 */
function createElement(value, obj, ind) {
    // if (value == "pictureMarker") {
    var pictureMarkerHtml =
        `
        <div class="pictureMarker" style="position: absolute;">
            <div class="popup" style="width: 190px;font-size: 16px;text-align: center;
            background: url('/uploads/wechat/163607/file/安防展/images/backUIAnchor.png') no-repeat; 
            background-size: 100% 100%;color: #eee;position: absolute;bottom: 20px;left: -80px;">
                <div style="word-wrap: break-word;padding: 10px;">
                    <div>设备名称 : <span>${obj.name}</span></div>
                    <div style="${ind == 0 || ind == 1 ? 'display:block;' : 'display:none;'}">状态 : <span style="color:red;">入侵告警</span></div>

                    <div style="${ind == 2 ? 'display:block;' : 'display:none;'}">状态 : <span style="color:red;">信号丢失</span></div>

                    <div style="${ind == 3 ? 'display:block;' : 'display:none;'}">状态 : <span style="color:red;">火灾告警</span></div>
                </div>
            </div>
            <div id="box${ind}" style="display:none;position: absolute;height: 40px;width: 40px;z-index:-1;"></div>
            <div class="picture" style="height: 30px;width: 30px;"></div>
        </div>`;
    $('#div3d').append($(pictureMarkerHtml));
    // }
    createUIAnchor(value, obj, ind);

    // 如果闪烁动画/跳跃动画发光开启中，先关闭闪烁动画/跳跃动画发光，再开启图片标注发光
    $('.pictureMarker').removeClass('scaleAnimation');
    $('.pictureMarker').removeClass('moveAnimation');
    $('#box' + ind).css('top', '-7px');
    $('#box' + ind).css('left', '-25px');
    $('#box' + ind).css('display', 'block');
    createCanvas(ind); // 创建圆形扩散效果
}

/**
 * 创建UIAnchor界面
 * @param {String} value - 界面类型
 */
function createUIAnchor(value, obj, ind) {
    var anchorCreateJson = {
        type: "UIAnchor",
        element: null,
        parent: obj,
        position: null,
        pivotPixel: null,
    }
    // if (value == "pictureMarker") {
    anchorCreateJson.element = $(".pictureMarker")[ind];
    anchorCreateJson.position = obj.position;
    anchorCreateJson.pivotPixel = [parseFloat($(".pictureMarker").css("width")) / 2, parseFloat($(".pictureMarker").css("height"))];
    // }
    tempTopCard = app.create(anchorCreateJson); // 创建顶牌
    tempTopCard.visible = true; // 设置初始顶牌状态
    ui.push(tempTopCard)

}

/**
 * 创建圆形扩散效果
 */
function createCanvas(ind) {
    var canvasList = document.getElementById('box' + ind);
    var canvas = document.createElement('canvas');
    canvasList.appendChild(canvas);
    canvas.width = 80;
    canvas.height = 80;
    var context = canvas.getContext("2d");
    var width = 80,
        height = 80;
    var arr = [];
    arr.push({
        x: parseInt(canvas.width / 2),
        y: parseInt(canvas.height / 2)
    });

    // 创建构造函数Circle
    function Circle(x, y, radius) {
        this.xx = x; // 在画布内随机生成x值
        this.yy = y;
        this.radius = radius;
    };
    Circle.prototype.radiu = function () {
        radius += 0.5; // 每一帧半径增加0.5
        if (this.radius > 25) {
            radius = 0;
        };
    };
    // 绘制圆形的方法
    Circle.prototype.paint = function () {
        context.beginPath();
        context.arc(this.xx, this.yy, this.radius, 0, Math.PI * 2);
        context.closePath();
        context.lineWidth = 2; // 线条宽度
        context.strokeStyle = 'red'; // 颜色
        context.stroke();
    };

    var newfun = null;
    var radius = 0;

    function createCircles() {
        for (var j = 0; j < arr.length; j++) {
            newfun = new Circle(arr[j].x, arr[j].y, radius); //调用构造函数
            newfun.paint();
        };
        newfun.radiu();
    };

    // 创建临时canvas 
    var backCanvas = document.createElement('canvas'),
        backCtx = backCanvas.getContext('2d');
    backCanvas.width = width;
    backCanvas.height = height;
    // 设置主canvas的绘制透明度
    context.globalAlpha = 0.95;
    // 显示即将绘制的图像，忽略临时canvas中已存在的图像
    backCtx.globalCompositeOperation = 'copy';
    var render = function () {
        // 先将主canvas的图像缓存到临时canvas中
        backCtx.drawImage(canvas, 0, 0, width, height);
        // 清除主canvas上的图像
        context.clearRect(0, 0, width, height);
        // 在主canvas上画新圆
        createCircles();
        // 等新圆画完后，再把临时canvas的图像绘制回主canvas中
        context.drawImage(backCanvas, 0, 0, width, height);
    };
    // 刷新计时器
    setInterval(function () {
        render();
    }, 20);
}