Question

我正在尝试用鼠标旋转SVG路径。 Fiddle。但我的问题很少，

旋转原因错误
当我停止旋转并再次旋转时，它从不同的起始角度开始，而不是从前一个角度开始。
不确定如何在轮换后更新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

您的中心错误的原因是您正在使用<activity android:name=".example.Main"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>。这将返回页面上路径的位置。不在SVG内。当您使用这些矩形坐标并将它们用于新getBoundingClientRect()的位置时，它会定位在错误的位置。这是因为SVG不位于页面的最左上方。

您应该使用<circle>来获取SVG坐标中路径的边界。

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

See this SO question to see how to convert mouse coords to SVG coords.

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

1 个答案: