我正在尝试使用 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";
}
});
最佳答案
您可以通过 SVG DOM 读取转换 Angular
var currentRotation = this.path.transform.animVal[0].angle;
关于javascript - svg变换旋转精度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49380119/