Canvas实现图片文字旋转、变形，CDrag最终版本已发布

前言

前几篇文章实现了CDrag最核心的功能，今天完善了一下，增加命中图形后置顶渲染、仅展示功能与画布移动。

命中置顶渲染

在选中某个图形后把他放置到最顶层、完成操作后再放回原层级

我的实现思路是命中后重绘所有图形、对命中的图形提出来 放到最后渲染、操作后再重绘即可

 // 选中最后渲染
  selectTop () {
    this.clearCanvas()
    this.#drawList.forEach(drawData => {
       // 跳过命中渲染
      if (this.#selectKey !== drawData.tempKey) {
      // 省略...
      }
    })
    // 选中最后单独渲染
    const selectRect = this.getSelectedRect()
    // 单独渲染
  }

画布移动

画布移动即更改画布原点再重绘图形，图形按照新原点坐标绘制到达移动效果，

// 按下位置减移动位置得到移动距离
const moveX = clientX - downX
const moveY = clientY - downY
// 设置原点
this.#ctx.translate(moveX, moveY)
// 更新按下位置
downX = downX + moveX
downY = downY + moveY
this.draw()

完整功能演示

附件

CDrag npm

CDrag 示例项目