svg 控制 line 标签 长度及角度

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
function changeDirection(angleGet) {//修改角度
   var start = { x: $('line').attr('x1'), y: $('line').attr('y1') }
   var stop = { x: $('line').attr('x2'), y: $('line').attr('y2') }
   var row1 = Math.pow(stop.x - start.x, 2)
   var col1 = Math.pow(stop.y - start.y, 2)
   var a = start.x;
   var b = start.y;
   var c = Math.sqrt(row1 + col1)
   var angleNeed = angleGet
   if (Number(angleNeed) != 90) {
       var d1 = Math.tan(angleNeed * (2 * Math.PI / 360))
       var d = Math.pow(d1, 2) + 1
       var e = Math.sqrt(d)
       var f = c / e
       var g = Number(start.x) + Number(f)
       var l = Number(start.x) - Number(f)
       var h = Number(start.y) + Number(d1 * f)
       var i = Number(start.y) - Number(d1 * f)
       if (Number(start.x) <= Number(stop.x)) {
           return { x: g, y: h }
       } else if (Number(start.x) > Number(stop.x)) {
           return { x: l, y: i }
       }
   } else {
       if (Number(start.x) <= Number(stop.x)) {
           return { x: start.x, y: Number(start.y) + Number(c) }
       } else if (Number(start.x) > Number(stop.x)) {
           return { x: start.x, y: Number(start.y) - Number(c) }
       }
   }
}
function changeLong(longGet) {//修改长度
   var start = { x: $('line').attr('x1'), y: $('line').attr('y1') }
   var stop = { x: $('line').attr('x2'), y: $('line').attr('y2') }
   var longNeed = longGet
   var k = (stop.y - start.y) / (stop.x - start.x)
   var b = start.y - k * start.x
   var e = Math.pow(k, 2) + 1
   var c = Math.sqrt(e)
   var f = longNeed / c
   var g = Number(start.x) + Number(f)
   var l = Number(start.x) - Number(f)
   var h = Number(start.y) + Number(k * f)
   var i = Number(start.y) - Number(k * f)
   if (Number(stop.x) != Number(start.x)) {
       if (Number(start.x) <= Number(stop.x)) {
           return { x: g, y: h }
       } else if (Number(start.x) > Number(stop.x)) {
           return { x: l, y: i }
       }
   } else {
       if (Number(start.x) <= Number(stop.x)) {
           return { x: start.x, y: Number(start.y) + Number(longNeed) }
       } else if (Number(start.x) > Number(stop.x)) {
           return { x: start.x, y: Number(start.y) - Number(longNeed) }
       }
   }
}

猜你喜欢

转载自blog.csdn.net/m0_37285193/article/details/80405854
SVG