Fabric.js Canvas如何让矩形选中时也始终处于三角形下方

fabric.js 框架默认配置下，对象被选中时会自动提升到画布最顶层，取消选中后才会恢复原有层级顺序，这是矩形选中后覆盖三角形的核心原因。

方案1：全局修改层级配置（推荐） #

初始化画布时开启preserveObjectStacking参数，开启后所有对象选中时都不会改变原有层级关系：

const canvas = new fabric.Canvas('你的画布元素ID', {
  preserveObjectStacking: true
})

该方案改动最小，完全适配矩形固定在三角形下方的需求。

方案2：手动控制层级（适合不需要全局修改的场景） #

如果不想修改全局配置，可以在每次添加三角形后，手动调整层级顺序：
首先修改获取选中矩形的代码，拿到矩形实例而非仅坐标：

// 原代码仅获取坐标，调整为获取矩形实例
const activeRect = canvas.getActiveObject()
const rect = activeRect.aCoords

添加三角形的逻辑最后新增层级调整代码，同时注意修正原判断语句的语法问题：

const x = event.pointer.x
const y = event.pointer.y
// 注意：JS不支持连续大小判断，原写法rect.tl.x + 20 < x < rect.br.x - 20逻辑不生效，需修改为如下格式
if (x > rect.tl.x + 20 && x < rect.br.x - 20 && y > rect.tl.y + 20 && y < rect.br.y - 20) {
  var points = regularPolygonPoints(3, 10);
  var myPoly = new fabric.Polygon(points, {
    stroke: 'red',
    left: x,
    top: y,
    strokeWidth: 2,
    strokeLineJoin: 'bevil'
  }, false);
  canvas.add(myPoly);
  // 新增：将三角形置顶，保证永远在矩形上方
  canvas.bringToFront(myPoly)
  // 也可选择将矩形置底：canvas.sendToBack(activeRect)
}

方案3：仅限制矩形选中不置顶（适合其他对象需要保留选中置顶行为的场景） #

监听画布的对象选中事件，仅当选中对象是矩形时手动恢复层级：

canvas.on('object:selected', function(e) {
  const selectedObj = e.target
  // 可根据矩形的type、自定义属性等做判断，此处以type判断为例
  if (selectedObj.type === 'rect') {
    // 将矩形移到最底层，也可根据实际需求调整到指定层级
    canvas.sendToBack(selectedObj)
  }
})

• 未选中状态效果图：
  
• 优化后选中矩形的效果图（三角形不会被覆盖）：
  

内容的提问来源于stack exchange，提问作者ahsan mukhtar