【es6】原生js在页面上画矩形层级等标题标优化(二)

接上篇的业务，实现了根本的画图，选中与拖动的效果，另有点细节标题，多个元素重叠在一起，选中的不能在最上面表现，以及末了绘制的元素要能覆盖前面绘制的，
优化如下
优化后效果

• 在背面绘制的矩形要能覆盖前面的,这个比力简单，改变每个div的z-index就可以
  
  
  
  
• 代码调解
  

1. drawRect() {
2.     const div = document.createElement("div");
3.     div.className = "draw-rect";
4.     div.style = `width: ${this.disX}px;height: ${
5.       this.disY
6.     }px;border:1px solid #ccc;position: absolute;left: ${this.startX}px;top: ${
7.       this.startY
8.     }px;z-index:${this.zIndex++};background:greenyellow`;
9.     div.appendChild(this.addDeleteBtn());
10.     document.body.appendChild(div);
11.     this.allRect.push(div);
12.     this.setCurrentBorderColor(div);
13.   }

复制代码

• 多个图形重叠在一起的时间，选择的元素在最顶层,也比力简单
  

1. changeBorderColor(target) {
2.   this.nowMoveTarget = target;
3.   this.setCurrentBorderColor(target);
4.   // 改变鼠标指针
5.   target.style.cursor = "move";
6.   target.style.zIndex = ++this.zIndex;
7. }

复制代码

• 完备代码
  

1. class Draw {  constructor() {    this.x = 0;    this.y = 0;    this.disX = 0;    this.disY = 0;    this.startX = 0;    this.startY = 0;    this.offsetX = 0;    this.offsetY = 0;    this.nowMoveTarget = null;    this.mouseDown = this.mouseDown.bind(this);    this.mouseMove = this.mouseMove.bind(this);    this.mouseUp = this.mouseUp.bind(this);    this.handleRectMove = this.handleRectMove.bind(this);    this.handleRectUp = this.handleRectUp.bind(this);    this.zIndex = 0;    this.allRect = [];    this.shadowBox = document.createElement("div");    this.init();  }  init() {    this.draw();  }  draw() {    document.addEventListener("mousedown", this.mouseDown, false);  }  mouseDown(e) {    console.log("🚀 ~ Draw ~ mouseDown ~ e:", e);    if (e.target.className == "delete-btn") return;    // 校验点击的是不是画的的元素    if (e.target.className == "draw-rect") {      // 改变边框颜色      this.changeBorderColor(e.target);      this.handleRectDown(e);      return false;    } else {      this.x = e.clientX;      this.y = e.clientY;      document.addEventListener("mousemove", this.mouseMove);      document.addEventListener("mouseup", this.mouseUp);    }  }  mouseMove(e) {    // 不要选中笔墨    e.preventDefault();    // this.disX = e.clientX - this.x    // this.disY = e.clientY - this.y    // const startX = e.clientX < this.x ? e.clientX : this.x    // const startY = e.clientY < this.y ? e.clientY : this.y    // this.disX = e.clientX > this.x ? e.clientX - this.x : this.x - e.clientX    // this.disY = e.clientY > this.y ? e.clientY - this.y : this.y - e.clientY    this.startX = Math.min(e.clientX, this.x);    this.startY = Math.min(e.clientY, this.y);    this.disX = Math.abs(e.clientX - this.x);    this.disY = Math.abs(e.clientY - this.y);    // console.log('🚀 ~ Draw ~ mouseMove ~ e:', this.disX, this.disY)    this.drawShadeRect();  }  mouseUp(e) {    document.removeEventListener("mousemove", this.mouseMove);    document.removeEventListener("mouseup", this.mouseUp);    this.drawRect();    this.shadowBox && this.shadowBox.remove();  }  drawShadeRect(startX, startY) {    this.shadowBox.style = `width: ${this.disX}px;height: ${      this.disY    }px;border:1px solid red;background:rgba(94,243,243,.5);position: absolute;left: ${      this.startX    }px;top: ${this.startY}px;z-index:${this.zIndex++}`;    document.body.appendChild(this.shadowBox);  }  drawRect() {
2.     const div = document.createElement("div");
3.     div.className = "draw-rect";
4.     div.style = `width: ${this.disX}px;height: ${
5.       this.disY
6.     }px;border:1px solid #ccc;position: absolute;left: ${this.startX}px;top: ${
7.       this.startY
8.     }px;z-index:${this.zIndex++};background:greenyellow`;
9.     div.appendChild(this.addDeleteBtn());
10.     document.body.appendChild(div);
11.     this.allRect.push(div);
12.     this.setCurrentBorderColor(div);
13.   }
14.   handleRectDown(e) {    this.startX = e.clientX;    this.startY = e.clientY;    this.offsetX = e.clientX - this.nowMoveTarget.offsetLeft;    this.offsetY = e.clientY - this.nowMoveTarget.offsetTop;    document.addEventListener("mousemove", this.handleRectMove);    document.addEventListener("mouseup", this.handleRectUp);  }  handleRectMove(e) {    this.disX = e.clientX - this.offsetX;    this.disY = e.clientY - this.offsetY;    this.nowMoveTarget.style.left = `${this.disX}px`;    this.nowMoveTarget.style.top = `${this.disY}px`;  }  handleRectUp() {    document.removeEventListener("mousemove", this.handleRectMove);    document.removeEventListener("mouseup", this.handleRectUp);  }  changeBorderColor(target) {    this.nowMoveTarget = target;    this.setCurrentBorderColor(target);    // 改变鼠标指针    target.style.cursor = "move";    target.style.zIndex = ++this.zIndex;  }  // 动态添加一个删除按钮  addDeleteBtn() {    const btn = document.createElement("button");    btn.innerHTML = "删除";    btn.className = "delete-btn";    btn.style = `position: absolute;right: 0px;bottom: -25px`;    // 绑定变乱    btn.onclick = function () {      this.parentElement.remove();    };    return btn;  }  setCurrentBorderColor(target) {    // 改变边框颜色,当前选中的高亮    this.allRect.forEach((item) => {      if (item != target) {        item.style.border = "1px solid #ccc";      }    });    target.style.border = "1px solid blue";  }}const d = new Draw();d.init();

复制代码

如许就对我们的画图的层级标题优化完成了。
总结

• 层级标题多半是css的z-index标题，必要我们手动去更新
  
• 还必要实现拖沓边框实现调解矩形巨细的业务
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金