旋轉的矩形與文本框不匹配 -有解無憂

我嘗試旋轉文本和背景矩形來注釋兩個點。但旋轉后，背景位置與文本框不匹配。

。

console.clear()

var svg = d3.select('body')
.append('svg')

add_defs(svg)

var g = svg.append('g')

var data = [[0,0], [100,100] ]
var nodes = g.selectAll(' .circle')
.data(data)
.join('ircle')
.attr('cx',d => d[0] )
.attr('cy',d => d[1] )
.attr('r', 2)
.attr('stroke','none')
.attr('fill','red')

ann_line(svg,data[0][0]，data[0][1]。 data[1][0],data[1][1]，"hello")

adjust_view(svg)

function ann_line(svg,ax, ay, bx,by,text) {
  var w = 10
  var dx = bx - ax
  var dy = by - ay
  var l = Math.sqrt(dx*dx dy*dy)
  dx /= l
  dy /= l
  var a1x = ax   w*dy
  var a1y = ay - w*dx
  var a2x = ax   2*w*dy
  var a2y = ay - 2*w*dx
  var b1x = bx   w*dy
  var b1y = by - w*dx
  var b2x = bx   2*w*dy
  var b2y = by - 2*w*dx

  var path = ['M'/span>,a1x,a1y,'L'/span>,b1x,b1y]
  var line = svg.append('path')
  .attr('d',path.join(')
 .attr('stroke'，'black')
 .attr('marker-start', 'url(#arrhead)')
  .attr('marker-end', 'url(#arrhead)') 。

  var cx = (a1x   b1x)/2.
  var cy = (a1y   b1y)/ 2
  var alpha = Math. atan（dx/dy）/Math.PI*180。

  const label = svg.append('text')
  .text(text)
  .attr('text-anchor', 'mid')
  .attr('alignment-baseline'/span>, 'middle')
  . attr('transform',`translate(${cx}, ${cy}) rotate(${alpha})`)

  const bb = label.node().getBBox() 。 
  svg.append（'rect'）.lower()
    .attr('stroke','none')
    .style('fill', 'steelblue')
    .attr('transform',`translate(${cx-bb. width/2},${cy-bb.height/2}) rotate(${α})`)
    .attr('width', bb.width)
    .attr('height', bb.height)
}

function renderTextInCenterOfLine（line, text） {
  const from = parseInt(line.attr('x1')) 。
  const to = parseInt(line.attr('x2')) 。
  const y = parseInt(line.attr('y1') ）。)
  const svg = d3.select（'svg'）。
  const textBackground = svg.append('rect' )
  const textElement = svg.append('text')
  .text(text)
  .attr('x', (from   to) /  2)
  .attr('y'/span>, y)
  .attr('text-anchor', 'mid')
  .attr('alignment-baseline', 'central') 。

  const box = textElement.node().getBBox() 。 
  const width = box.width   50; //span>
  const height = box.height   20;
  文本背景
    .attr('x', (from   to - width) /2)
    .attr('y', y - height /2)
    .attr('width', width)
    .attr('height', height)
    .style('fill', 'white')

}

function add_defs（svg） {
  var lw = 1
  var w = 6
  var h = 12
  var m =2
  var lc = 'black' 
  var path = ['M',2 w,2, 'L', 2 w,2 h,'M', 2 m,2 h/2, 'L',2,2 h/4, 2 w-lw, 2 h/2,2, 2 3*h/4,'z'/span>]   
  svg
    .append('defs')
    .append('marker')
    .attr('id'/span>, 'arrhead'/span>)
    . attr('viewBox', [0, 0, w 4, h 4] )
    .attr('refX'/span>, w 1)
    .attr('refY', 2 h/2)
    .attr('markerWidth', w 4)
    .attr('markerHeight', h 4)
    .attr('orient', 'auto-start-reverse')
    .append('path')
    .attr('d',path.join(')
    .attr('stroke', lc)
    .attr('strok-width',lw)
    .attr('fill',lc) 
    .attr('stroke-miterlimit', 10)
}

function adjust_view（svg） {
  var bbox = svg.node().getBBox()//getBoundingClientRect

  svg.attr('width',600)
    .attr('height',400)
    .attr('viewBox',[bbox.x, bbox. y,bbox.width,bbox.height])
    .style（'border'，'2px solid red'）。
}

<script src="https://cdnjs. cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

uj5u.com熱心網友回復：

如果你想讓元素圍繞其中心旋轉，計算該點（x,y）并將這些坐標放入rotate方法中：

rotate(${alpha} ${bb.width/2}) ${bb.height/2}）`。

這是你的代碼，有了這一改動：

顯示代碼片段

console.clear()

var svg = d3.select('body')
  .append('svg')

add_defs(svg)

var g = svg.append('g')

var data = [
  [0, 0] 。
  [100, 100] 。
]
var nodes = g.selectAll(' .circle')
  .data(data)
  .join('ircle')
  .attr('cx', d => d[0] )
  .attr('cy', d => d[1] )
  .attr('r',  2)
  .attr('stroke', 'none')
  .attr('fill', 'red')

ann_line(svg, data[0][0], data[0][1] 。data[1][0], data[1][1], "hello" )

adjust_view(svg)

function ann_line(svg, ax, ay, bx, by, text) {
  var w = 10
  var dx = bx - ax
  var dy = by - ay
  var l = Math.sqrt(dx*dx   dy*dy)
  dx /= l
  dy /= l
  var a1x = ax   w * dy
  var a1y = ay - w * dx
  var a2x = ax   2 * w * dy
  var a2y = ay - 2 * w * dx
  var b1x = bx   w * dy
  var b1y = by - w * dx
  var b2x = bx   2 * w * dy
  var b2y = by - 2 * w * dx

  var path = ['M'/span>, a1x, a1y, 'L'/span>, b1x, b1y]
  var line = svg.append('path')
    .attr('d', path.join(')
    .attr('stroke', 'black')
    .attr('marker-start', 'url(#arrhead)')
    .attr('marker-end', 'url(#arrhead)') 。

  var cx = (a1x   b1x) / 2.
  var cy = (a1y   b1y) / 2
  var alpha = Math. atan(dx / dy) / Math.PI * 180。

  const rect = svg.append('rect') 。

  const label = svg.append('text')
    .text(text)
    .attr('text-anchor', 'mid')
    .attr('alignment-baseline'/span>, 'middle')
    . attr('transform', `translate(${cx}, ${cy}) rotate(${alpha})`)

  const bb = label.node().getBBox() 。

  rect.attr('stroke', 'none')
    .style('fill', 'steelblue')
    .attr('transform', `translate(${cx-bb.width/2},${cy-bb. height/2}) rotate(${alpha} ${bb. width/2} ${bb.height/2}） `)
    .attr('width', bb.width)
    .attr('height', bb.height)
}

function renderTextInCenterOfLine（line, text） {
  const from = parseInt(line.attr('x1')) 。
  const to = parseInt(line.attr('x2')) 。
  const y = parseInt(line.attr('y1') ）。)
  const svg = d3.select（'svg'）。
  const textBackground = svg.append('rect' )
  const textElement = svg.append('text')
    .text(text)
    .attr('x', (from   to) /  2)
    .attr('y'/span>, y)
    .attr('text-anchor', 'mid')
    .attr('alignment-baseline', 'central') 。

  const box = textElement.node().getBBox() 。
  const width = box.width   50; //span>
  const height = box.height   20;
  文本背景
    .attr('x', (from   to - width) /2)
    .attr('y', y - height /2)
    .attr('width', width)
    .attr('height', height)
    .style('fill', 'white')

}

function add_defs（svg） {
  var lw = 1
  var w = 6
  var h = 12
  var m =2
  var lc = 'black' 
  var path = ['M', 2   w, 2, 'L', 2   w, 2   h, 'M', 2   m, 2   h / 2, 'L', 2, 2   h / 4, 2   w - lw。2   h / 2，2。2   3 * h / 4, 'z'/span>]
  svg
    .append('defs')
    .append('marker')
    .attr('id'/span>, 'arrhead'/span>)
    . attr('viewBox', [0, 0, w   4, h   4] )
    .attr('refX', w  1)
    .attr('refY', 2   h /2)
    .attr('markerWidth', w 4)
    .attr('markerHeight', h 4)
    .attr('orient', 'auto-start-reverse')
    .append('path')
    .attr('d', path.join(')
    .attr('stroke', lc)
    .attr('strok-width', lw)
    .attr('fill', lc)
    .attr('stroke-miterlimit'/span>, 10)
}

function adjust_view（svg） {
  var bbox = svg.node().getBBox() //getBoundingClientRect

  svg.attr('width', 600)
    .attr('height', 400)
    .attr('viewBox', [bbox.x, bbox. y, bbox.width, bbox.height] )
    .style('border'，'2px solid red')
}

<script src="https://cdnjs. cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/320105.html

標籤：

上一篇：我可以在同一個檔案中使用SVG元素來顯示一個邊框影像嗎？

下一篇：渲染一個單一的SVG元素到畫布或影像上