svg - 使用 Batik 绘制 SVG 选择框

Question

我注意到许多 SVG 构建工具几乎每个元素都可以调整大小和旋转。如下图

最常见的实现方法是什么，每当单击一个元素时，一条边框线就会出现在长边上，并带有用于调整大小和旋转的小矩形？

这些对象默认情况下是“隐藏”的并且仅在单击鼠标时可见吗？或者必须在每个 mousedown 上绘制它们并在每个 mouseup 上删除它们？

Answer 1

Are these objects "hidden" by default and only visible during mouse click ?

除非您使用提供该功能的库，即 FabricJS ，那么不，您必须自己绘制该选择矩形。

---

您看到的所有 float 工具本质上都有代码来创建您在所选项目顶部看到的这个矩形 - 这个矩形称为可见 Bounding Box元素的 - 在现代浏览器中，这是使用 el.getBBox() 获取的方法。

返回的边界框为您提供了您自己绘制选择矩形所需的所有信息( x 、 y 、 width 、 height )。

通常，您有一个可以在其上工作的 Canvas (可能是 <div> ，可能是 SVG 矩形等...) - 这个概念并非 HTML5 Canvas 独有。

• 单击元素时绘制选择矩形。
• 单击 Canvas 空白区域时会删除选择矩形。

这是我为此制作的一个片段，它还允许通过按住“Shift”进行多项选择。

const svgns = 'http://www.w3.org/2000/svg'

// Draw selection box if we click on one or more elements.
$('.element').click(function() {
  const bbox = $(this)[0].getBBox()

  if (shiftKeyDown) {
    drawSelectionRect(bbox.x, bbox.y, bbox.width, bbox.height)

    return
  }

  $('.selectionRect').remove()
  drawSelectionRect(bbox.x, bbox.y, bbox.width, bbox.height)
})


// Remove selection box(es) if we click on empty area.
$('#svgCanvas').click(() => {
  $('.selectionRect').remove()
})


// Helper function which draws a selection box.
const drawSelectionRect = (x, y, width, height) => {
  var rect = document.createElementNS(svgns, 'rect')
  rect.setAttributeNS(null, 'x', x)
  rect.setAttributeNS(null, 'y', y)
  rect.setAttributeNS(null, 'height', height)
  rect.setAttributeNS(null, 'width', width)

  rect.setAttributeNS(null, 'stroke-width', '2px')
  rect.setAttributeNS(null, 'stroke', 'red')
  rect.setAttributeNS(null, 'fill', 'none')
  rect.setAttributeNS(null, 'stroke-dasharray', '5,1')
  rect.setAttributeNS(null, 'class', 'selectionRect')

  document.getElementById('workarea').appendChild(rect)
}


// Determine if Shift key is being pressed.
let shiftKeyDown = false

$(document).keydown(e => {
  if (e.keyCode == 16) {
    shiftKeyDown = true
  }
})

$(document).keyup(e => {
  shiftKeyDown = false
})

#container {
  display: block;
  height: 320px;
  background-color: #eee;
}

.element {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>Click on any element to draw it's selection box.</li>
  <li>Hold down "Shift" to allow multi-selection.</li>
  <li>Click anywhere else on the canvas to remove selections.</li>
</ul>

<div id="container">
  <svg  id="workarea" width="100%" height="100%">
    <rect id="svgCanvas" width="100%" height="100%" x="0" y="0" style="fill:transparent"/>
    <rect class="element" width="100" height="100" x="50" y="100" style="fill:#009688;" />
    <rect class="element" width="75" height="100" x="250" y="150" style="fill:#009688;" />
  </svg>
</div>