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);
    });

这是我重新创建的codepen。它几乎按照我的要求工作，除了它在这里和那里保留了一些电影我不知道如何解决。就像我不知道我认为的尺度高度。也许它应该是动态的？

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

修复旋转和缩放比例比例功能

1 个答案: