使用 SVG transform rotate 解決畫框中的數字跟隨旋轉的問題

問題描述

在圖片上畫框標注數字，旋轉畫布后，數字隨之旋轉，可讀性不強，要求修改成無論畫布怎么旋轉，數字都是正向顯示~ 原交互圖示：

解決方案

先看下 dom 的結構

然后看下下面簡單的代碼

  // 獲取畫框的
  let rectNode = SVG.get(id) ? SVG.get(id) : null;
  // 獲取文本的節點
  let textNode = SVG.get(id + '-text') ? SVG.get(id + '-text') : null;
  if (rectNode && textNode) {
    let rectWidth = rectNode.width()
    let rectHeight = rectNode.height();
    let textX = textNode.x();
    let textY = textNode.y();
    let transform = '';
    // 我這里是順時針旋轉的
          switch (rotateDeg) {
            case '90':
              transform = `rotate(270, ${rectHeight / 2 + textX}, ${rectHeight / 2 + textY})`;
              break;
            case '180':
              transform = `rotate(180, ${rectWidth / 2 + textX}, ${rectHeight / 2 + textY})`;
              break;
            case '270':
              transform = `rotate(90, ${rectWidth / 2 + textX}, ${rectWidth / 2 + textY})`;
              break;
            default:
              break
          }

      textNode.attr('transform', transform);
    }

交互結果：

完美~

知識點

1、直接使用了SVG 的 transform 的 rotate的屬性就實現了~

2、看上面的代碼是不是感覺跟我們熟悉的CSS中的rotate有所不同呢？是的，SVG的rotate(angle [x y])比CSS 的rotate(angle)多了2個可選參數[x, y]，這是實現本交互的關鍵點，它們主要是用來偏移 transform 變化中心點的, SVG的旋轉不是按自身旋轉的，而是以畫布的左上角為中心的。

具體的基礎屬性的理解我覺得這篇文章寫的比較透徹，可以看看 理解SVG transform坐標變換