# template

**Repository Path**: dfusion/template

## Basic Information

- **Project Name**: template
- **Description**: 画图工具
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-06-05
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1.左右按钮的点击事件           
1. 左右切换的时候需要注意一个问题
>$('#item0').on('slide.bs.carousel', function() {}      

bootstrap的走马灯在调用滑动时，这时候是有延迟的，如果获得$(this)，无法得到当前对应的信息

>$('#item0').on('slid.bs.carousel', function() {}

  bootstrap的走马灯在调用滑动后，这时候延迟的已经执行完毕，如果获得$(this)，可以得到当前对应的信息。   
  所以当前的图片src是通过$('#item0').on('slid.bs.carousel', function() {}的返回值得到。
2. 在点击按钮时遍历imgInfosList里图片的src,如果=当前的src就其对应的所有src都取出来放到一个新数组中origin_points.
3. 通过调用appearOriginPoints()函数恢复路径

## 2.tmp_canvas mouseup事件
1. 在最上层的canvas上画图，通过监听mouseup事件可以获得当前路径的所有点
2. 通过设置
>ctx.globalCompositeOperation = 'source-over';

把当前tmp_canvas作为图片画到第二层的canvas

1）关于存储图片信息
1. 首先在window下挂载imgInfosList，在mouseup的时候   
2. 从imgInfosList中循环遍历，发现有无对应的ImgInfo
3. 如果没有，新new 一个ImgInfo,然后将图片信息和坐标信息存储到ImgInfo,然后将ImgInfo存储到imgInfosList中
4. 如果有ImgInfo，读取ImgInfo,将坐标信息存储到ImgInfo的pointInfoList里去，然后将ImgInfo再存储到imgInfosList
>  var org_imgInfo;
>    for (var i in imgInfosList) {
>    for (var i in imgInfosList) {
      if (imgInfosList[i].src == CurrrentImgSrc) {
        org_imgInfo = imgInfosList[i];
      }
    }
    //当前图片没有路径
    if (org_imgInfo == null) {
      var imgInfos = new ImgInfos();
      var pointInfo = new PointInfos();
      pointInfo.point = ppts;
      pointInfo.id = parseInt((pointInfo.point[0].x + pointInfo.point[0].y) / 2);
      $("#Text").attr("data-id", pointInfo.id);
      var allNumber = CurrrentImgSrc.match(/\d/g);
      var id = allNumber.join().replace(',', "");
      imgInfos.id = id;
      imgInfos.src = CurrrentImgSrc;
      imgInfos.pointInfos.originPoints.push(pointInfo);
      imgInfosList.push(imgInfos);
      console.log(imgInfosList);
      //TODO 根据2进行编程
    } else {
      //TODO 根据3进行编程
      console.log(2);
      var pointInfo = new PointInfos();
      pointInfo.point = ppts;
      pointInfo.id = parseInt((pointInfo.point[0].x + pointInfo.point[0].y) / 2);
      $("#Text").attr("data-id", pointInfo.id);
      org_imgInfo.pointInfos.originPoints.push(pointInfo);
    }

## 3.三个缩略图的点击事件
1. 首先获得图片的集合，然后通过click事件里的e找到当前的元素。
2. 然后清空当前大容器里的元素，把当前点击的元素复制一份放在大容器中。
3. 因为大容器的id是item0，把当前复制的版本信息设置为大容器里的信息
  >  $(".lists img").click(function(e) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      canvas.width = parseInt(sketch_style.getPropertyValue('width'));
      canvas.height = parseInt(sketch_style.getPropertyValue('height'));
      var currentEm = $(e.target).parent().parent().parent();
      var cloneItem = $(currentEm).clone();
      $(cloneItem).attr("id", "item0");
      var cloneAttrId = $(cloneItem).attr("id", "item0");
      $(cloneAttrId).find(".icon-prev").attr("href", "#item0");
      $(cloneAttrId).find(".icon-next").attr("href", "#item0");
      $(".big #con").empty();
      //$(".contain .lists").remove();
      $(cloneAttrId).appendTo($("#con"));
      //console.log(cloneItem);
      var LeftBtn = document.querySelector('#item0 .icon-prev');
      var RightBtn = document.querySelector('#item0 .icon-next');
      //单击按钮清楚画布
      LeftBtn.addEventListener('click', function(e) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));
        // CurrrentImgSrc = $(this).siblings(".carousel-inner").children(".active").children().attr('src');
  });
      RightBtn.addEventListener('click', function(e) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));
        // CurrrentImg = $(this).siblings(".carousel-inner").children(".active").children().attr('src');
      })
      console.log($("#item0"));
      //TODO  ======切换的时候找到相应的路径===========
      $('#item0').on('slid.bs.carousel', function() {
        // console.log(this);
        // console.log(imgInfosList);
        points = [];
        var Currrent = $(this).children().children(".active").children().attr('src')
        for (var i in imgInfosList) {
          // console.log(imgInfosList[i])
          if (imgInfosList[i].src == Currrent) {
            var curent_points = imgInfosList[i].pointInfos.originPoints;
            for (var i in curent_points) {
              points.push(curent_points[i].point);
            }
            //     console.log(curent_points);
            //   //  points.push(imgInfosList[i].pointInfos[0].point);
            //   }
            //   else{
            //     points=[];
          }
        }
        console.log(imgInfosList);
        appearOriginPoints();
      });
    });

## 4.canvas.mouseup

1. canvas.mouseup时调用的擦除函数实际上跟画笔一样，通过
>ctx.globalCompositeOperation = 'destination-out';

设置把新画出来的线与之前的线重合的地方都设置为透明
2. 在擦除的时候找到当前图片上的所有点与擦除的点比对，如果有重合的则清除整个画布
3. 缺点，这种方法不优雅有待改进。

## 5.保存按钮的点击事件
1. 在每次画完路径时都为点集合添加一个id
2. 获得输入框为其添加一个自定义属性与路径的id关联  ok
3. 每次tmp_canvas mouseup时会遍历imgInfosList判断当前路径的id跟input的id是否一致如果一致，就把当前input的值给存到路径的desc,这样就可以把路径对应起来。