如何将元素绕圆移动 [英] How to move element arround a circle
本文介绍了如何将元素绕圆移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新来的；].我该如何计算translateX& .loader-marker元素在matrix()中的translateY位置.我有一个角度，它可能是0、60、120、180、240、300、360度. .loader-marker应该绕着最大的圆圈滚动并标记数字.我可以根据角度计算倾斜度和缩放比例，但是找不到基于此的平移(XY)位置计算方法.代码示例在这里
I'm new here ;]. How can I calculate the translateX & translateY position in matrix() on .loader-marker element. I have the angle, it might be 0, 60, 120, 180, 240, 300, 360 deg. The .loader-marker should rolling around the biggest circle and mark the numbers. I can calculate the skew and scale based on the angle, but I cant find a way to calculate the translate(XY) position based on thus I have. The code example is here
var loadedAngel = 60;
var angelRadians = 60 * (Math.PI / 180);
var radius = 178;
var cx = 260;
var cy = 264;
var matrix=[1,0,0,1,0,0];
var svg = document.getElementById("box-loader-svg");
var loader = document.getElementById("path-loader");
var marker = document.getElementById('loader-marker');
document.getElementById("path-loader").setAttribute("d", describeArc(cx, cy, radius, 0, loadedAngel));
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
}
// for example
// rotate 60 degrees clockwise from 0 degrees
// so the .loader-marker element should mark text "2nd" in my case
rotate(loadedAngel*Math.PI/180);
// plug our transform array into the <g>
marker.setAttribute('transform', 'matrix(' + matrix.join(', ') + ')');
// do the scale to the array
function scale(x,y){
matrix[0] *= x;
matrix[1] *= x;
matrix[2] *= y;
matrix[3] *= y;
}
// do the rotate to the array
function rotate(radians){
var cos = Math.cos(radians);
var sin = Math.sin(radians);
var m11 = matrix[0] * cos + matrix[2] * sin;
var m12 = matrix[1] * cos + matrix[3] * sin;
var m21 = -matrix[0] * sin + matrix[2] * cos;
var m22 = -matrix[1] * sin + matrix[3] * cos;
matrix[0] = m11;
matrix[1] = m12;
matrix[2] = m21;
matrix[3] = m22;
}
body {
background: #000;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 520" class="box-loader-svg">
<g class="loader-circles">
<g transform="rotate(-90 260 264)">
<circle class="loader-outer"
cx="260"
cy="264"
r="200"
fill="none"
stroke="#64d3de"
stroke-miterlimit="10"
opacity="0.6"
transform="matrix(1,0,0,1,0,0)"
style="stroke-dashoffset: 1e-05; stroke-dasharray: none;">
</circle>
</g>
<g transform="rotate(-90 260 264)">
<circle class="loader-track"
cx="260"
cy="264"
r="178"
fill="none"
stroke="#50afb8"
stroke-miterlimit="10"
stroke-width="20"
transform="matrix(1,0,0,1,0,0)"
style="stroke-dashoffset: 1e-05; stroke-dasharray: none;">
</circle>
</g>
<g transform="rotate(-90 260 264)">
<circle class="loader-track-perc"
cx="260"
cy="264"
r="178"
fill="none"
stroke="#fff"
stroke-miterlimit="10"
stroke-width="20"
transform="matrix(1,0,0,1,0,0)"
style="stroke-dashoffset: 0; display: none;">
</circle>
</g>
<g>
<path id="path-loader" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="20" d="">
</path>
</g>
</g>
<g class="loader-stages" fill="#64d3de">
<rect x="260" y="55" width="1" height="9" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></rect>
<rect x="260" y="55" width="1" height="9" transform="matrix(0.5,-0.86602,0.86602,0.5,-98.38070659909181,357.5996176858462)" style="transform-origin: 0px 0px 0px;"></rect>
<rect x="260" y="55" width="1" height="9" transform="matrix(-0.5,-0.86602,0.86602,-0.5,162.11929340090836,621.5996176858464)" style="transform-origin: 0px 0px 0px;"></rect>
<rect x="260" y="55" width="1" height="9" transform="matrix(-1,0,0,-1,521,528)" style="transform-origin: 0px 0px 0px;"></rect>
<rect x="260" y="55" width="1" height="9" transform="matrix(-0.49999,0.86602,-0.86602,-0.49999,619.3807065990918,170.40038231415366)" style="transform-origin: 0px 0px 0px;"></rect>
<rect x="260" y="55" width="1" height="9" transform="matrix(0.5,0.86602,-0.86602,0.5,358.88070659909175,-93.59961768584628)" style="transform-origin: 0px 0px 0px;"></rect>
</g>
<g class="loader-stages-text" fill="#fff" font-size="18">
<text x="250" y="44">6th</text>
<text x="445" y="155">1st</text>
<text x="445" y="385">2nd</text>
<text x="250" y="496">3th</text>
<text x="50" y="385">4th</text>
<text x="50" y="155">5th</text>
</g>
<g class="voc-word">
<text x="50%"
y="50%"
stroke="none"
text-anchor="middle"
stroke-width="1px"
dy=".3em"
fill="#fff"
>
text
</text>
</g>
<g id="loader-marker">
<g class="loader-marker-pointer">
<circle cx="260" cy="35" fill="none" r="20" stroke="#fff" stroke-width="2"></circle>
</g>
<rect class="loader-marker-line" fill="#fff" height="35" width="2" x="260" y="55"></rect>
</g>
</svg>
推荐答案
您的旋转中心位于(260, 264).例如，您的.loader-marker最初可能以图例"6th"为中心显示在(260, 35)(大约)上:
Your rotation center is at (260, 264). Your .loader-marker could, for example, originally be shown centered on the legend "6th", at (260, 35) (approx.):
<g class="loader-marker" stroke="#fff" stroke-width="2" fill="none">
<circle x="260" y="35" r="20" />
<path d="M 260 55 260 90" transform="rotate(45, 260, 35)" />
</g>
然后将标记放置在图例"nth"而不松动其方向可以表示为
Then placing the marker at legend "nth" without it loosing its orientation can be expressed as
var marker = document.getElementById('loader-marker');
var cx = 260,
cy = 264,
mx = 260,
my = 35;
function positionMarker (number) {
var angle = 60 * number;
var transform = 'rotate(' + angle + ' cx cy) rotate(-' + angle + ' mx my)';
marker.setAttribute('transform', transform);
}
这篇关于如何将元素绕圆移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
