专栏首页deepcccanvas 绘点图

canvas 绘点图

canvas 绘点图

项目中需要一个记录点实时变动的信息,在此记录一下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
</head>

<body>
  <canvas id="myCanvas2" class="pointCanvas" width="950" height="650"></canvas>
  <canvas id="myCanvas" class="pointCanvas" width="950" height="650"></canvas>
  <script type="text/javascript">
  var data1 = {
    "code": 0,
    "msg": "Get complete!",
    "data": {
      "d3:35:c5:e7:62:27": [369.92, 425.31],
      "20:29:73:d7:09:37": [575.07, 192.57],
    }
  }
  jQuery(function() {
    $.fn.extend({

      // 将可选择的变量传递给方法
      runingPoint: function(options) {
        return this.each(function() {
          var __this = this;
          // console.log($(this));
          var runingPoint = {
            // 参数配置
            options: {
              // c: $(__this),
              radius: 10,
              url: null,
              imgUrl: null,
              points: [],
              selectedCircle: null,
              hoveredCircle: null
            },

            // 初始化方法
            init: function(config) {
              var _this = this,
                o = this.options;
              $.extend(true, _this.options, config);
              console.log(_this.options);
              // 第一次执行
              _this.getData();
              _this.eventsFn();

              // 每5秒执行一次
              setInterval(function() {
                o.hoveredCircle = undefined;
                _this.getData();
              }, 5000);

              // 测试数据 start
              // setInterval(function(){

              //  var arrData = [];
              //  var D = data1.data;
              //  o.hoveredCircle = undefined;
              //  for(var i in D){
              //      arrData.push({x:D[i][0],y:D[i][1],name:i})
              //  }
              //  // console.log('init',arrData);

              //  _this.drawFn(arrData);
              // }, 5000);//测试数据 end

            },

            // 获取数据
            getData: function() {
              var _this = this,
                o = this.options;
              var arrData = [];
              $.getJSON(o.url, function(data) {
                // console.log('getData',data);
                if (data.code == 0) {
                  var D = data.data;
                  for (var i in D) {
                    arrData.push({
                      x: D[i][0],
                      y: D[i][1],
                      name: i
                    })
                  }
                  // 调用绘图方法
                  _this.drawFn(arrData);

                }
              });
            },

            //清除canvas
            clear: function() {
              var _this = this,
                o = this.options;
              var ctx = __this.getContext("2d");
              ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            },

            // 获取点的信息
            getPointInfoFn: function(p) {
              var _this = this,
                o = this.options;

              console.log('getPointInfoFn', JSON.stringify(p));

              // $.getJSON('/path/to/file', {param1: 'value1'}, function(json, textStatus) {

              // });
            },

            // 事件绑定
            eventsFn: function() {
              var _this = this,
                o = this.options;
              // 红点click事件
              $(__this).on('click', function(e) {
                var e = window.event || e
                var rect = this.getBoundingClientRect();
                var mouseX = e.clientX - rect.left; //获取鼠标在canvsa中的坐标
                var mouseY = e.clientY - rect.top;

                o.hoveredCircle = undefined;
                for (var i = 0; i < o.points.length; i++) { // 检查每一个圆,看鼠标是否滑过
                  var circleX = o.points[i].x;
                  var circleY = o.points[i].y;
                  var radius = o.radius;
                  if (Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2) < Math.pow(radius, 2)) {
                    o.hoveredCircle = i;
                    // console.log('click',o.points[i]);
                    // 获取点信息
                    _this.getPointInfoFn(o.points[i]);
                    //点击放大
                    _this.drawFn(o.points);
                    break;
                  }
                }
              });

            },

            // 绘图方法
            drawFn: function(data) {
              var _this = this,
                o = this.options;
              var D = data;
              var ctx = __this.getContext("2d");
              var img = document.createElement('img');
              img.src = o.imgUrl;
              o.points = [];
              _this.clear();
              if(!o.imgUrl){
                drawPointFn();
                return;
              }
              img.onload = function() {
                drawPointFn();
              }
              function drawPointFn(){
                ctx.drawImage(img, 0, 0);
                ctx.fillStyle = "#FF0000";
                // console.log(D);
                for (var i in D) {
                  // 记录点的数据
                  o.points.push({
                    x: D[i].x,
                    y: D[i].y,
                    name: D[i].name
                  });

                  ctx.beginPath();
                  ctx.arc(D[i].x, D[i].y, i == o.hoveredCircle ? o.radius * 1.5 : o.radius, 0, Math.PI * 2, true); //Math.PI*2是JS计算方法,是圆
                  ctx.closePath();
                  ctx.fill();
                }
              }
            }

          }; // runingPoint End
          console.log(options)
          runingPoint.init(options);


        });
      }
    }); //extend end



    // 初始化
    $(".pointCanvas").runingPoint({
      radius: 10,
      imgUrl: './img/img.jpg',
      url: 'data.json'
    });

  })
  </script>
</body>

</html>

下载demo:http://pan.baidu.com/s/1jHjeHRw

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • inputSuggest邮箱提示自动补全js插件

    deepcc
  • 学习js在线html(富文本)编辑器

    deepcc
  • js 闭包 详解

    deepcc
  • JS高级-数据结构的封装

    最近在看了《数据结构与算法JavaScript描述》这本书,对大学里学的数据结构做了一次复习(其实差不多忘干净了,哈哈)。如果能将这些知识捡起来,融入到实际工作...

    小古哥
  • 微信小游戏1

    游戏内容介绍 游戏作品内容准确介绍〔包括但不限于:游戏背景、扮演角色、游戏角色(NPC)、场景、主要情节、玩法、功能(系统)、主要特点、游戏使用方法等〕,须逐...

    达达前端
  • openlayers4中闪烁点的实现

    lzugis
  • JavaScript组件设计思想

    上个周,并肩作战的田老师离职了,尽管在一起愉快玩耍的时间不到一年,自己仍然还是从其身上学到、体会到了好多关于知识、理想的东西。对于大多数年轻人关于“晚上想想千条...

    奋飛
  • VUE+WebPack前端游戏设计:实现物体的拖拽动态特效

    望月从良
  • 面试官:你分析过mybatis工作原理吗?

    当然,还有很多可以在XML 文件中进行配置,上面的示例指出的则是最关键的部分。要注意 XML 头部的声明,用来验证 XML 文档正确性。environment ...

    阮键
  • h5小游戏——HitRocket

    一.游戏介绍 游戏介绍: 不断有携带字母炸弹的火箭撞向地面,请根据火箭身上的字母敲击键盘,每一次对应的敲击会击落携带该字母的火箭并使得分加一,每一架火箭撞到地...

    lonelydawn

扫码关注云+社区

领取腾讯云代金券