javascript - 调整大小时如何使光标与控制点同步？

我正在创建一个编辑器。
我想要旋转/调整大小和平移对象的基本功能。

我已经设法完成了这三个操作，但是唯一的问题是我的鼠标位置没有跟随控制点（对于其他未显示的控制点，问题甚至变得更糟）。

您将在以下示例中找到右中间调整大小的示例，该示例的旋转角度为30度，没有mouseY位置，请注意，当旋转角度等于0时，鼠标将完全跟随我的控制点。

有没有一种方法可以轻松解决此问题，我走错了路吗？

这是jsfiddle链接，您可以在其中更改代码中的旋转角度以自己查看JSiddle link。 （只需单击并拖动黑色控制点即可调整对象的大小）

//convert value of range amin to amax to the range bmin to bmax;
function imap(value, amin, amax, bmin, bmax)
{
	if ((amax - amin))
		return (value - amin) * (bmax - bmin) / (amax - amin) + bmin;
	return (0);
};

//get mouse coordinates from the SVG element
function getMouse(el, e)
{
  var pt = el.createSVGPoint();
	pt.x = e.clientX;
	pt.y = e.clientY;
	var cursorpt =  pt.matrixTransform(el.getScreenCTM().inverse());
	return({x: cursorpt.x, y: cursorpt.y})
};

var controlPoint = document.getElementById("c"); //My control point element

var mouseX;
var mouseXClicked = 0;
var scaleX = 1;
var scaleY = 1;
var scaleXClicked = 1;
var control = false; // sets if resizeRightMiddle() should be executed
var rectWidth = 100; //is normally tooken with a getBBox() function
var scale = document.getElementById("scale");

function resizeRightMiddle()
{
  //convert difference between original mouse X postion on click and actual X mouse position into a scale factor
	plusX = imap(mouseX - mouseXClicked, 0, rectWidth, 0, 1);
  //add converted scale factor to the original x scale value
	resX = scaleXClicked + plusX;
	scale.setAttribute('transform', 'scale(' + resX + ',' + scaleY + ')');
	scaleX = resX;
}

var svg = document.getElementById("main");
// save Scale and X mouse coordinate on click
svg.addEventListener("mousedown", function(e){
	var coord = getMouse(svg, e);
	mouseXClicked = coord.x;
	scaleXClicked = scaleX;
});

svg.addEventListener("mousemove", function(e){
//get mouse coordinates
	var coord = getMouse(svg, e);
	mouseX = coord.x;
// resize if control element has been clicked
	if (control)
		resizeRightMiddle();
});

// desactivate resize
svg.addEventListener("mouseup", function(e){
	control = false;
});

//activate resize
controlPoint.addEventListener("mousedown", function(){
	control = true;
});

svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div>
<svg id="main" width="1000" height="300">
	<g transform="translate(66, 56)">
		<g id="rotate" transform-origin="center" transform="rotate(30)">
			<g id="scale">
  			<path fill="red" stroke="red" d="M 0 0 L 0 100 L 100 100 L 100 0Z" />
				<rect id="c" fill="black" stroke="black" x=95 y=45 width=10 height=10 />
			</g>
		</g>
	</g>
</svg>
</div>

最佳答案

下面的代码计算每个mousemove事件上鼠标沿矩形方向的移动量，而不是从鼠标向下的起点到当前的mousemove。然后，它更新updatedRectWidth并将其用于计算当前所需的比例。

var controlPoint = document.getElementById("c");
var control = false;
var origRectWidth = 100;
var scale = document.getElementById("scale");
var relevantMouseMoveDist = 0;
var updatedRectWidth = origRectWidth;
var mouseDownPt = {};
var rotateDiv = document.getElementById("rotate");
var rotateString = rotateDiv.getAttribute('transform');
var rectangleAngle = parseInt(rotateString.slice(rotateString.indexOf("(") + 1)) * Math.PI / 180; // retrieve the angle from the DOM
var relevantMouseMoveDist;
var newMousePosn;
var oldMousePosn;

function resizeRightMiddle()
{
  updatedRectWidth += relevantMouseMoveDist;
  xScale = updatedRectWidth/origRectWidth;
  scale.setAttribute('transform', 'scale(' + xScale + ',1)');
}

var svg = document.getElementById("main");

svg.addEventListener("mousemove", function(e){

  if (newMousePosn) {

    // the former mouse pos'n
    oldMousePosn = {x: newMousePosn.x, y: newMousePosn.y};

    // the new mouse pos'n
    newMousePosn = {x: e.clientX, y: e.clientY};

    // the change in the mouse pos'n coordinates since the last move event
    var deltaMouseMove = {
      x: newMousePosn.x - oldMousePosn.x,
      y: newMousePosn.y - oldMousePosn.y
    };

    // the dir'n of this movement
    var angleOfMouseMovement = Math.atan2(deltaMouseMove.y, deltaMouseMove.x);

    // the absolute distance the mouse has moved
    var mouseMoveDist = Math.sqrt(
      deltaMouseMove.x * deltaMouseMove.x +
      deltaMouseMove.y * deltaMouseMove.y
    );

    // the difference in direction between the mouse movement and orientation of the rectangle
    var angleDifference = angleOfMouseMovement - rectangleAngle;

    // the portion of the mouse movement that is in the direction of the rectangle's orientation
    relevantMouseMoveDist = mouseMoveDist * Math.cos(angleDifference);

    // resize the rectangle if necessary
    if (control) resizeRightMiddle();

  } else {

    // establish the mouse pos'n during the first mousemove event
    newMousePosn = {x: e.clientX, y: e.clientY};
  }

});

svg         .addEventListener("mouseup"  , function(e){control = false;});
controlPoint.addEventListener("mousedown", function(e){control = true ;});

<div>
<svg id="main" width="1000" height="300">
	<g transform="translate(66, 56)">
		<g id="rotate" transform-origin="center" transform="rotate(40)">
			<g id="scale">
  			<path fill="red" stroke="red" d="M 0 0 L 0 100 L 100 100 L 100 0Z" />
				<rect id="c" fill="black" stroke="black" x=95 y=45 width=10 height=10 />
			</g>
		</g>
	</g>
</svg>
</div>

关于javascript - 调整大小时如何使光标与控制点同步？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44709931/