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

Question

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

基本上现在当玩家将他们的 touch/mouse 移动到形状的中心时，缩放在某个点停止（当我们到达中心时）;/

有什么建议应该调整吗？我很确定它与这些变量有关： - 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 应该是初始的 "distance to mouse"，而不是您示例中 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

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

fix scaling in rotate & scale function

scaling

svg

transform