修复旋转和缩放功能中的缩放

Question

我现在（下）让这个函数运行得很好，可以进行旋转（它可以正确检测角度等）。现在我的努力是让缩放以这样一种方式工作，即用户越靠近形状的初始中心，形状就会变得非常小。

基本上现在当玩家在某个点将触摸/鼠标移动到形状的中心时，缩放就会停止（当我们到达中心时）；/

任何建议应该调整什么？ 我很确定它与这些变量有关： - this.activeShape.scale.height（目前我取形状边界框的最高点； - this.activeShape.scale.point（当前与旋转点相同 - 形状边界框的中心）。

mainSVG.rotateMove = function(event) {
    this.eventObj = this.isTouchSupported? event.touches[0] : event;
    this.moveCoordsCache = this.globalToLocalCoordinates(this.eventObj.clientX, this.eventObj.clientY);
    let rdx = this.moveCoordsCache.x - this.activeShape.rotation.center.x;
    let rdy = this.moveCoordsCache.y - this.activeShape.rotation.center.y;
    let theta = Math.atan2(rdy, rdx) * 180 / Math.PI + 90;
    if (rdx < 0 && rdy < 0) { theta += 360 };
    theta -= 180;
    let sdx = this.activeShape.scale.point.x - this.moveCoordsCache.x;
    let sdy = this.activeShape.scale.point.y - this.moveCoordsCache.y;
    let distanceToMouse = Math.sqrt(sdx * sdx + sdy * sdy);
    let transform = "translate(" + this.activeShape.rotation.center.x + "," + this.activeShape.rotation.center.y + ") rotate(" + theta + ") scale(" + distanceToMouse / this.activeShape.scale.height + ") translate(" + (-this.activeShape.rotation.center.x) + "," + (-this.activeShape.rotation.center.y) + ")";
    this.domCtrl.write(()=>{
        this.activeShape.setAttribute("transform", transform);
    });

这是我重新创建的代码笔。它几乎可以按我的意愿工作，只是它在这里和那里保留了一些我不知道如何修复的轻弹。就像我不知道我认为的比例高度应该是多少。也许它应该是动态的？

https://codepen.io/cmer41k/pen/rYMLBz

Answer 1

我在您的示例中看到的唯一问题是，当您开始拖动旋转器时，形状会稍微跳跃并变小。

在您的转换中，您将比例计算为distanceToMouse / scaleHeight。因此，scaleHeight 应该是初始的“到鼠标的距离”，而不是您的示例中 item 组的高度。

var rectBox = rectangle.getBBox(),
    rotBox = rotator.getBBox();
rotateAndScaleAround = {
    x: rectBox.x + rectBox.width/2,
    y: rectBox.y + rectBox.height/2
};
scaleHeight = (rotBox.y + rotBox.height/2) - rotateAndScaleAround.y;

更新笔：https://codepen.io/Sphinxxxx/pen/EbgooY