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

Question

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

我已经设法做到了其中的三个，但现在唯一的问题是我的鼠标位置不跟随控制点(对于下面未显示的其他控制点，问题变得更糟)。

你会在下面找到一个右中间调整大小的例子，旋转 Angular 为 30 度，没有 mouseY 位置，请注意，当旋转 Angular 等于 0 时，鼠标完全跟随我的控制点。

有没有办法轻松解决这个问题，我是不是走错了路？

这里是jsfiddle链接，可以在代码中改变旋转 Angular 自己看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>

Answer 1

下面的代码计算在每个 mousemove 事件中鼠标在矩形的方向上移动了多少，而不是从 mousedown 的开始到当前的 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>