canvas画板之绘画元素的框选

头像
LH_S
     上海
    阅读 9 分钟

    前言

    我大概在两个月之前做了一个基于canvas的画板，基于canvas实现的多功能画板，然后最近不是太忙，就利用下班的时间又迭代了一个版本，增加了以下内容

    1. 在选择模式下可以点击元素进行框选，并按住手柄进行缩放或者移动，点击Backspace键可以删除选择元素
    2. 双击画板输入文字绘制在指定位置

    本篇我就详细介绍下框选元素的实现思路和具体代码，效果如下

    预览

    预览地址：https://songlh.top/paint-board/
    repo：https://github.com/LHRUN/paint-board 欢迎Star⭐️

    实现思路

    1. 首先需要框选的元素必须在初始化时和更新时记录矩形属性，比如宽高、矩形坐标，这是实现框选的基础
    2. 鼠标在移动时需要根据当前坐标判断悬浮在哪个元素上方，这样才能在点击时进行处理，并且鼠标移动时需要有光标的改变
    3. 在有框选元素的情况下，渲染时在最后根据框选元素的矩形属性渲染框选效果
    4. 在有框选元素的情况下，拖拽时根据拖拽的位置来判断是移动还是改变大小
    5. 元素改变大小有两种情况，保持比例(文字)的缩放和不保持比例(画笔)的缩放

    记录矩形属性

    因为画笔随着绘画一直在增加新的坐标点，所以我在矩形属性外另记录了最小和最大的xy坐标用于计算宽高

    /**
 * 根据新坐标点，更新矩形属性
 * @param instance 画笔元素
 * @param position 坐标点
 */
export const updateRect = (instance: FreeDraw, position: MousePosition) => {
  const { x, y } = position
  let { minX, maxX, minY, maxY } = instance.rect
  if (x < minX) {
    minX = x
  }
  if (x > maxX) {
    maxX = x
  }
  if (y < minY) {
    minY = y
  }
  if (y > maxY) {
    maxY = y
  }
  const rect = {
    minX,
    maxX,
    minY,
    maxY,
    x: minX,
    y: minY,
    width: maxX - minX,
    height: maxY - minY
  }
  instance.rect = rect
  return rect
}

    计算鼠标移动坐标

    • 随着鼠标移动，我们需要改变光标让使用者感知到已经移动到元素上方，所以就需要计算鼠标坐标是否已经和绘画路径临近到一定距离

    • 绘画路径是由一个个的坐标点组成，我们可以把每个坐标点和上一个坐标点连成一个线段，然后在满足以下任何一种情况就可以认为是悬浮在元素上方了

      • 鼠标坐标距离线段起点小于10像素
      • 鼠标坐标距离线段终点小于10像素
      • 鼠标坐标距离线段小于10像素并且x和y坐标在线段的两端点范围内

      • // 遍历画笔元素所有坐标点
for (let i = 1; i < positions.length; i++) {
  // 距离起点距离
  const startDistance = getDistance(movePos, positions[i - 1])
  // 距离终点距离
  const endDistance = getDistance(movePos, positions[i])
  // 距离线段距离
  const lineDistance = getPositionToLineDistance(
    movePos,
    positions[i - 1],
    positions[i]
  )
  const rangeX =
    Math.max(positions[i - 1].x, positions[i].x) >= movePos.x &&
    movePos.x >= Math.min(positions[i - 1].x, positions[i].x)
  const rangeY =
    Math.max(positions[i - 1].y, positions[i].y) >= movePos.y &&
    movePos.y >= Math.min(positions[i - 1].y, positions[i].y)

  // 满足三种情况其中一种就可以记录下画笔元素
  if (
    startDistance < 10 ||
    endDistance < 10 ||
    (lineDistance < 10 && rangeX && rangeY)
  ) {
    this.mouseHoverElementIndex = eleIndex
  }
}
// ...

/**
 * 计算两点之间的距离
 * @param start 起点
 * @param end 终点
 * @returns 距离
 */
export const getDistance = (start: MousePosition, end: MousePosition) => {
  return Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2))
}

/**
 * 获取鼠标坐标距离线段距离
 * @param pos 鼠标坐标
 * @param startPos 线段起点
 * @param endPos 线段终点
 * @returns 距离
 */
export const getPositionToLineDistance = (
  pos: MousePosition,
  startPos: MousePosition,
  endPos: MousePosition
) => {
  /**
   * 1. 计算三点之间的直线距离
   * 2. 计算三角形半周长
   * 3. 通过海伦公式求面积
   * 4. 根据面积公式求三角形的高
   */
  const A = Math.abs(getDistance(pos, startPos))
  const B = Math.abs(getDistance(pos, endPos))
  const C = Math.abs(getDistance(startPos, endPos))

  const P = (A + B + C) / 2
  const area = Math.abs(Math.sqrt(P * (P - A) * (P - B) * (P - C)))
  const distance = (2 * area) / C
  return distance
}

    点击渲染框选效果

    • 点击时如果在之前hover时满足三种情况已经记录下来了，就继续记录为框选元素

    • 然后在画板渲染时，就按照框选元素的矩形属性渲染框选效果

      if (this.select.selectElementIndex !== -1) {
    // 获取选择元素的矩形属性，绘制框选效果
    const rect = this.select.getCurSelectElement().rect
    drawResizeRect(this.context, rect)
}

/**
 * 绘制拖拽矩形
 */
export const drawResizeRect = (
    context: CanvasRenderingContext2D,
    rect: ElementRect
) => {
    const { x, y, width, height } = rect
    context.save()
    context.strokeStyle = '#65CC8A'
    context.setLineDash([5])
    context.lineWidth = 2
    context.lineCap = 'round'
    context.lineJoin = 'round'
    // 绘制虚线框
    drawRect(context, x, y, width, height)

    // 绘制四角手柄
    context.fillStyle = '#65CC8A'
    drawRect(context, x - 10, y - 10, 10, 10, true)
    drawRect(context, x + width, y - 10, 10, 10, true)
    drawRect(context, x - 10, y + height, 10, 10, true)
    drawRect(context, x + width, y + height, 10, 10, true)
    context.restore()
}

/**
 * 绘制矩形
 */
export const drawRect = (
  context: CanvasRenderingContext2D,
  x: number,
  y: number,
  width: number,
  height: number,
  fill = false // 是否填充
) => {
  context.beginPath()
  context.rect(x, y, width, height)
  if (fill) {
    context.fill()
  } else {
    context.stroke()
  }
}

    拖拽元素

    拖拽元素比较简单，就是计算鼠标移动的距离，然后遍历坐标点加上距离即可

    // startMousePos就是上一个移动的坐标
const disntanceX = x - this.startMousePos.x
const disntanceY = y - this.startMousePos.y

/**
 * 更新位置
 * @param distanceX
 * @param distanceY
 */
export const moveFreeDraw = (
  instance: FreeDraw,
  distanceX: number,
  distanceY: number
) => {
  initRect(instance)
  instance.positions.forEach((position) => {
    position.x += distanceX
    position.y += distanceY
    updateRect(instance, position)
  })
}

    画笔缩放(不保持比例)

    • 画笔缩放我先以右下角手柄拖拽为例分析

    • 首先画笔的缩放比例是分为水平缩放比例和垂直缩放比例

      • 水平缩放比例 = (旧矩形的宽 + 鼠标水平移动的距离) / 旧矩形的宽
      • 垂直缩放比例 = (旧矩形的高 + 鼠标垂直移动的距离) / 旧矩形的高

    • 然后遍历画笔的所有坐标点进行缩放，这时会出现一个偏移的缩放效果，如下图

    • 这时就需要计算当前拖拽手柄对角顶点移动的距离是多少，然后减去这个距离就得到了正确的缩放效果了

    • 当然四个角的拖拽计算是不一致的，但是思路一致

      switch (this.resizeType) {
    // disntanceX 鼠标水平移动距离
    // disntanceY 鼠标垂直移动距离
    // 右下角
    case RESIZE_TYPE.BOTTOM_RIGHT:
      resizeFreeDraw(
        resizeElement as FreeDraw,
        (rect.width + disntanceX) / rect.width,
        (rect.height + disntanceY) / rect.height,
        rect,
        RESIZE_TYPE.BOTTOM_RIGHT
      )
      break
    // 左下角
    case RESIZE_TYPE.BOTTOM_LEFT:
      resizeFreeDraw(
        resizeElement as FreeDraw,
        (rect.width - disntanceX) / rect.width,
        (rect.height + disntanceY) / rect.height,
        rect,
        RESIZE_TYPE.BOTTOM_LEFT
      )
      break
    // 左上角
    case RESIZE_TYPE.TOP_LEFT:
      resizeFreeDraw(
        resizeElement as FreeDraw,
        (rect.width - disntanceX) / rect.width,
        (rect.height - disntanceY) / rect.height,
        rect,
        RESIZE_TYPE.TOP_LEFT
      )
      break
    // 右上角
    case RESIZE_TYPE.TOP_RIGHT:
      resizeFreeDraw(
        resizeElement as FreeDraw,
        (rect.width + disntanceX) / rect.width,
        (rect.height - disntanceY) / rect.height,
        rect,
        RESIZE_TYPE.TOP_RIGHT
      )
      break
    default:
      break
}

/**
 * 缩放绘画
 * @param instance
 * @param scaleX
 * @param scaleY
 * @param rect
 * @param resizeType
 */
export const resizeFreeDraw = (
    instance: FreeDraw,
    scaleX: number,
    scaleY: number,
    rect: FreeDrawRect,
    resizeType: string
) => {
    // 初始化矩形
    initRect(instance)
    // 遍历所有坐标进行缩放
    instance.positions.forEach((position) => {
      position.x = position.x * scaleX
      position.y = position.y * scaleY
      updateRect(instance, position)
    })
    const { x: newX, y: newY, width: newWidth, height: newHeight } = instance.rect
    let offsetX = 0
    let offsetY = 0
    // 计算偏移距离，这个是要根据当前缩放手柄的对角顶点进行计算，所以要分为4种情况
    switch (resizeType) {
      case RESIZE_TYPE.BOTTOM_RIGHT:
        offsetX = newX - rect.x
        offsetY = newY - rect.y
        break
      case RESIZE_TYPE.BOTTOM_LEFT:
        offsetX = newX + newWidth - (rect.x + rect.width)
        offsetY = newY - rect.y
        break
      case RESIZE_TYPE.TOP_LEFT:
        offsetX = newX + newWidth - (rect.x + rect.width)
        offsetY = newY + newHeight - (rect.y + rect.height)
        break
      case RESIZE_TYPE.TOP_RIGHT:
        offsetX = newX - rect.x
        offsetY = newY + newHeight - (rect.y + rect.height)
        break
      default:
        break
    }
    initRect(instance)
    // 减去偏移距离
    instance.positions.forEach((position) => {
      position.x = position.x - offsetX
      position.y = position.y - offsetY
      updateRect(instance, position)
    })
}

    文字缩放(保持比例)

    • 文字缩放需要一直保持着宽高比，通过计算出新旧矩形的宽高比

      • 当新的宽高比小于旧的宽高比时，宽度不变，计算 高度 = 宽度 / 旧的宽高比

      • 但新的宽高比大于旧的宽高比时，高度不变，计算 宽度 = 高度 * 旧的宽高比

        switch (this.resizeType) {
  // ...
  // 右下角
  case RESIZE_TYPE.BOTTOM_RIGHT:
    resizeTextElement(
      resizeElement as TextElement,
      resizeElement.rect.width + disntanceX,
      resizeElement.rect.height + disntanceY,
      RESIZE_TYPE.BOTTOM_RIGHT
    )
    break
  // 左下角
  case RESIZE_TYPE.BOTTOM_LEFT:
    resizeTextElement(
      resizeElement as TextElement,
      resizeElement.rect.width - disntanceX,
      resizeElement.rect.height + disntanceY,
      RESIZE_TYPE.BOTTOM_LEFT
    )
    break
  // 左上角
  case RESIZE_TYPE.TOP_LEFT:
    resizeTextElement(
      resizeElement as TextElement,
      resizeElement.rect.width - disntanceX,
      resizeElement.rect.height - disntanceY,
      RESIZE_TYPE.TOP_LEFT
    )
    break
  // 右上角
  case RESIZE_TYPE.TOP_RIGHT:
    resizeTextElement(
      resizeElement as TextElement,
      resizeElement.rect.width + disntanceX,
      resizeElement.rect.height - disntanceY,
      RESIZE_TYPE.TOP_RIGHT
    )
    break
  default:
    break
}

/**
 * 修改文本元素大小
 * @param ele 文本元素
 * @param width 改变后的宽度
 * @param height 改变后的高度
 * @param resizeType 拖拽类型
 */
export const resizeTextElement = (
  ele: TextElement,
  width: number,
  height: number,
  resizeType: string
) => {
  const oldRatio = ele.rect.width / ele.rect.height
  const newRatio = width / height
  // 按照之前的说明，修改宽高比不一致的情况
  if (newRatio < oldRatio) {
    height = width / oldRatio
  } else if (newRatio > oldRatio) {
    width = oldRatio * height
  }

  /**
   * 因为这个缩放是按照左上角缩放的
   * 所以为了达到当前拖拽手柄不移动，就需要进行偏移操作
   */
  switch (resizeType) {
    case RESIZE_TYPE.BOTTOM_RIGHT:
      break
    case RESIZE_TYPE.BOTTOM_LEFT:
      ele.rect.x -= width - ele.rect.width
      break
    case RESIZE_TYPE.TOP_LEFT:
      ele.rect.x -= width - ele.rect.width
      ele.rect.y -= height - ele.rect.height
      break
    case RESIZE_TYPE.TOP_RIGHT:
      ele.rect.y -= height - ele.rect.height
      break
    default:
      break
  }
  ele.rect.height = height
  ele.rect.width = width
  // 字体大小按照高度修改
  ele.fontSize = ele.rect.height
}

    总结

    如果有发现问题或者有好的方案，欢迎讨论👻

    前端canvasreactdrawing
    LH_S
    124 声望6 粉丝

    keep learning...

    « 上一篇
    颜色选择器的纯JS实现
    下一篇 »
    canvas画板之画笔的多种效果

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    画板探秘系列：结合 Transformers.js 实现图像智能处理

    LH_S赞 1阅读 250

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 15阅读 22.5k评论 18

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    0 条评论
    得票最新