像素画生成器 ​

/*
* 参数说明：
* setcolorflag 鼠标移动flag
* thepixeldom 鼠标选中的pixeldom元素
* color 当前缓存的色彩值
* getpointpositions 其他功能函数
*/

let setcolorflag = 0;
/* 画笔（点击上色） */
function setcolorforpixel(index) {
  const thepixeldom = pixels.value;
  const color = sessionStorage.getItem("endcolor");
  if (eraserflag.value) {
    thepixeldom[index].style = `background:null`;
  } else {
    thepixeldom[index].style = `background:${color}`;
  }
  setcolorflag = 1;
  getpointpositions(index);
}

/* 鼠标移动上色 */
function movesetcolorforpixel(index) {
  if (setcolorflag) {
    setcolorforpixel(index);
  }
}

/* 鼠标停止移动 */
function upsetcolorforpixel() {
  setcolorflag = 0;
}

/*
 * 收集绘制的像素点
 * 根据当前像素的index值，结合绘制窗体的长宽，计算出当前的x，y值
 * 将坐标值存储到framelist里
 *
 * 需要考虑到当前录入是否需要将前一帧的数据录入到下一帧
 * 所以增加一个index值对应绘制框是哪一个像素dom
 */
function getpointpositions(index) {
  const thepixeldom = pixels.value;
  const width = parseInt(drawboxs.value.style.width);
  const height = parseInt(drawboxs.value.style.height);
  const stand = width / parseInt(thepixeldom[index].offsetHeight);
  // console.log(thepixeldom[index].offsetHeight);

  const point = { x: 0, y: 0 };
  point.x = parseInt(index % stand);
  point.y = parseInt(index / stand);
  point.color = sessionStorage.getItem("endcolor");
  point.sort = index;
  // console.log(point);
  /* 采用unshift是为了配合去重函数 */
  framelist.value[framekey.value].point.unshift(point);
  console.log(framelist.value[framekey.value].point);
}

/* 
* 参数说明
* framelist 像素点集合
* framekey 当前关键帧
* savelastframeflag 是否保存上一帧的绘制数据 默认为否
*/

/*
 * 增加帧
 * 注意增加帧的时候 是否保留当前数据到下一帧
 */
function addframe() {
  if (framelist.value[framekey.value].point.length == 0) {
    alert("请先绘制图案");
    return;
  }
  const frame = {
    name: "关键帧",
    point: [],
  };

  framelist.value.push(frame);
  framekey.value = framelist.value.length - 1;

  if (!savelastframeflag.value) {
    clearframepixel();
  }
}

/* 清空绘制窗口像素 */
function clearframepixel() {
  const thepixeldom = pixels.value;

  for (const item of thepixeldom) {
    item.style = `background:null`;
  }
}

/*
 * 渲染绘制窗口像素
 * 我需要对每一帧的画进行渲染
 * 但是我只有一个绘制窗口，如何对不同的绘制数据进行渲染呢？
 *
 * 可以先清空，然后走一下颜色渲染，在点击帧的时候，触发本事件
 */
function setframepixel() {
  clearframepixel();

  const list = framelist.value[framekey.value];
  const thepixeldom = pixels.value;

  for (const item of list.point) {
    thepixeldom[item.sort].style = `background:${item.color}`;
  }
}

/* 插入帧 */
function insertframe() {
  if (framelist.value[framekey.value].point.length == 0) {
    alert("请先绘制图案");
    return;
  }

  if (!savelastframeflag.value) {
    clearframepixel();
  }

  if (framelist.value[framekey.value + 1].point.length != 0) {
    const frame = {
      name: "关键帧",
      point: [],
    };
    framelist.value.splice(framekey.value + 1, 0, frame);
    framekey.value += 1;
  } else {
    framekey.value = framelist.value.length - 1;
  }
}

/*
 * 选择帧
 * 如果当前的关键帧等于传入的参数，那么就不进行渲染函数
 */
function choseframe(index) {
  if (framekey.value == index) {
    return;
  } else {
    framekey.value = index;
    setTimeout(() => {
      setframepixel();
    }, 10);
  }
}

/* 删除当前帧 */
function delframe() {
  if (framelist.value.length == 1) {
    alert("必选保留一个帧");
    return;
  } else {
    framelist.value.splice(framekey.value, 1);
    // console.log( framelist.value);
    
    framekey.value = 0;
    setframepixel(0)
  }
}

function export2Excel() {
  let code = framelist.value;
  // 生成html字符串
  const html = gethtml(code);
  // 创建一个a标签
  var a = document.createElement("a");
  // 创建一个包含blob对象的url
  var url = window.URL.createObjectURL(
    new Blob([html], {
      type: "",
    })
  );
  a.href = url;
  a.download = "drwatool-v1.0.0-catool.html";
  a.click();
  window.URL.revokeObjectURL(url);
}