問題描述
在圖片上畫框標註數字,旋轉畫布後,數字隨之旋轉,可讀性不強,要求修改成無論畫布怎麼旋轉,數字都是正向顯示~ 原互動圖示:
解決方案
先看下 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座標變換