路径绘图和使用鼠标调整大小

Question

我试图用鼠标旋转SVG路径.小提琴.但我几乎没有问题,

1. 轮换的起源是错误的
2. 当我停止旋转并再次旋转时,它从不同的起始角度开始,而不是从前一个角度开始.
3. 不确定如何更新circle旋转后的位置.

代码在这里:

var svgns = 'http://www.w3.org/2000/svg';
var path = document.getElementById('path-element');
var angle = 0;
function getRotationPoint() {
  var bRect = path.getBoundingClientRect();
  var rotationPoint = [bRect.left + (bRect.width / 2), bRect.top - 20];
  return rotationPoint;
}
var rotationPoint = getRotationPoint();
var circle = document.createElementNS(svgns, 'circle');
circle.setAttribute('style', 'fill: #DCDCDC; stroke: red; stroke-width: 2; pointer-events: visiblePainted');
circle.setAttribute('cx', rotationPoint[0]);
circle.setAttribute('cy', rotationPoint[1]);
circle.setAttribute('r', 4);
document.querySelector('svg').appendChild(circle);

var mousedown = false, mouse_start = null;

circle.addEventListener('mousedown', function(event) {
  mousedown = true;
  initial_position = getRotationPoint();
  mouse_start = {
    x: event.clientX,
    y: event.clientY
  };
});

document.addEventListener('mousemove', function(event) {
  if (mousedown) {
    var x = event.clientX,
      y = event.clientY;
    var _angle = Math.atan2(y - mouse_start.y, x - mouse_start.x) * 180 / Math.PI;
    var transform = "rotate(" + _angle + "," + rotationPoint[0] + "," + rotationPoint[1] + ")";
    path.setAttribute('transform', transform);
  }
});

document.addEventListener('mouseup', function(event) {
  mousedown = false;
});

如果需要任何其他信息,请告诉我.

var svgns = 'http://www.w3.org/2000/svg';
var path = document.getElementById('path-element');
var angle = 0;

function getRotationPoint() {
  var bRect = path.getBoundingClientRect();
  var rotationPoint = [bRect.left + (bRect.width / 2), bRect.top - 20];
  return rotationPoint;
}

var rotationPoint = getRotationPoint();


circle = document.createElementNS(svgns, 'circle');

circle.setAttribute('style', 'fill: #DCDCDC; stroke: red; stroke-width: 2; pointer-events: visiblePainted');
circle.setAttribute('cx', rotationPoint[0]);
circle.setAttribute('cy', rotationPoint[1]);
circle.setAttribute('r', 4);

document.querySelector('svg').appendChild(circle);


var mousedown = false,
  mouse_start = null;

circle.addEventListener('mousedown', function(event) {
  mousedown = true;
  initial_position = getRotationPoint();
  mouse_start = {
    x: event.clientX,
    y: event.clientY
  };
});

document.addEventListener('mousemove', function(event) {
  if (mousedown) {
    var x = event.clientX,
      y = event.clientY;
    var _angle = Math.atan2(y - mouse_start.y, x - mouse_start.x) * 180 / Math.PI;
    var transform = "rotate(" + _angle + "," + rotationPoint[0] + "," + rotationPoint[1] + ")";
    path.setAttribute('transform', transform);
  }
});

document.addEventListener('mouseup', function(event) {
  mousedown = false;
});

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

<svg class="design-review-container" version="1.1" baseProfile="full" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none">
  <path id="path-element" style="fill: none; stroke: rgb(33, 150, 243); stroke-width: 3; pointer-events: visiblePainted; transform-origin: 50% 50%;" d="M109,100 C110.33333333333333,98.33333333333333,112.66666666666667,92,117,90 C121.33333333333333,88,128.83333333333334,82.83333333333333,135,88 C141.16666666666666,93.16666666666667,145,111.5,154,121 C163,130.5,177.83333333333334,140.5,189,145 C200.16666666666666,149.5,214,149.66666666666666,221,148 C228,146.33333333333334,229.33333333333334,137.16666666666666,231,135"></path>
</svg>

Answer 1

你的中心错误的原因是因为你正在使用getBoundingClientRect(). 这将返回页面上路径的位置。不在 SVG 内。当您采用这些矩形坐标并将它们用于新的位置时<circle>，它会被定位在错误的位置。这是因为 SVG 没有位于页面的最左上角。

您应该使用getBBox()SVG 坐标来获取路径的边界。

但是，如果您这样做，您还需要将鼠标坐标转换为 SVG 坐标。否则你的旋转拖动将无法正常工作。

请参阅此问题以了解如何将鼠标坐标转换为 SVG 坐标。