元素选中样式

示例

show code

const draw = (canvas) => {
  fabric.Image.fromURL('/images/cat.jpg', (img) => {
    // 设置背景图， 将背景图的宽高设置成画布的宽高
    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
      scaleX: canvas.width / img.width,
      scaleY: canvas.height / img.height,
      left: 0,
      top: 0,
    })

    let rect = new fabric.Rect({
      width: 80,
      height: 100,
      left: 10,
      top: 20,
      fill: 'rgba(255,0,0,0.4)',
      name: 'rect',
    })

    // 元素选中样式
    rect.set({
      borderColor: 'red', // 边框颜色
      cornerColor: 'green', // 控制角颜色
      cornerSize: 10, // 控制角大小
      transparentCorners: false, // 控制角填充色不透明
      transparentCorners: true, // 控制角填充色透明
      selectionBackgroundColor: 'orange', // 选中后，背景色变橙色
    })

    // rect.hasBorders = false // 取消边框
    // rect.hasControls = false // 禁止控制角
    canvas.hoverCursor = 'wait' // 设置等待指针

    // 将rect添加到画布中
    canvas.add(rect)

    // canvas.setActiveObject(rect) // 默认选中rect
  })
}