svg变换旋转精度

Question

我正在尝试使用 svg 创建一个简单的测试，允许我更改质量设置 (FPS) 和 svg 的旋转速度。

我注意到变换、旋转功能适用于度数。据我所知，使用小数作为度数是不可能提高精度的。

那么我们是否坚持使用旋转度数，它最多可以将一个圆分成 360 块，或者有什么方法可以提高精度吗？

我问的原因是因为我创建了一支笔 https://codepen.io/KaGys/pen/yKVjrr?editors=1111，我在其中添加了几个质量设置。质量设置越高，每秒的帧数就越高。这意味着如果 1 度是我可以旋转的最小单位，我将需要开始延迟动画以使其每帧慢于 1 度，这在我的最高质量设置（每秒最快帧数）下仍然是一个相当快的旋转.我希望问题很清楚，如果没有，请告诉我，我会尽力澄清。

    var ultra = 1000 / 120;
    var high = 1000 / 60;
    var medium = 1000 / 30;
    var low = 1000 / 10;

    var quality = ultra;

    var speed = 1; // degrees per frame on ultra quality (converts to lower quality settings to maintain consistency)
    // I tried doing this on per second basis, which works but the problem is that degrees can not be decimals which causes inconsistent behavior
    speed = (speed * quality) / ultra; // Recalculate the speed for consistency across quality settings

  var rotateSettings = {
    path: document.getElementById("pathGroup"),
    active: false,
    speed: speed,
    quality: quality
  };

  function rotate() {
    if (this.active) {
      setTimeout(rotate.bind(this), this.quality);
      var currentRotation = Number(
        /\d+/.exec(this.path.getAttributeNS(null, "transform"))
      );
  currentRotation = currentRotation%360;
      console.log(this.speed);
      this.path.setAttributeNS(
        null,
        "transform",
        `rotate(${currentRotation + this.speed}, 60, 60)`
      );
    }
  }

  document.getElementById("btnRotate").addEventListener("click", e => {
    if (!rotateSettings.active) {
      rotateSettings.active = true;
      document.getElementById("btnRotate").style.background = "green";
      document.getElementById("btnRotate").style.color = "white";
      rotate.bind(rotateSettings)();
    } else {
      rotateSettings.active = false;
      document.getElementById("btnRotate").style.background = "white";
      document.getElementById("btnRotate").style.color = "green";
    }
  });

Answer 1

您可以通过 SVG DOM

读取变换角度

var currentRotation = this.path.transform.animVal[0].angle;

svg变换旋转精度

svg transform rotation precision

html

javascript

css

svg

rotation