通过mousemove/touchmove错误进行SVG角度旋转 [英] SVG angle rotation by mousemove/touchmove bug
本文介绍了通过mousemove/touchmove错误进行SVG角度旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用一个食指通过mousemove/touchmove旋转svg圆.
I want to rotate svg circulars by mousemove/touchmove with one point finger.
我尝试了许多js脚本(例如， Touchy Wheel演示和旋转拨号演示)及其示例很完美，但是当我尝试示例时，总是会看到两个错误:
I tried many js scripts (for ex. Touchy Wheel Demo and Rotate Dial Demo) and their examples works perfect, but when I try my example I always see two bugs:
- 旋转仅在圆形的下部起作用，在顶部-反向旋转.
- 旋转非常缓慢(在演示轮中，鼠标/手指强烈跟随旋转).
我的演示: https://jsfiddle.net/0L87uabc/8/ (请先在作者的演示页面上查看它)
我也尝试这个简单的示例-result与上面类似:
Also i try this simple example -result is similar to above:
var dragging = false
$(function() {
var circles = ['circle-l1', 'circle-l2', 'circle-l3', 'circle-l4', 'circle-l5', 'circle-l6', 'circle-l7'];
$.each(circles, function(ind, val) {
var target = $('#'+val)
target.mousedown(function() {
dragging = true
})
$(document).mouseup(function() {
dragging = false
})
target.mousemove(function(e) {
if (dragging) {
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - 10, mouse_y - 10);
var degree = (radians * (180 / Math.PI) * -1) + 90;
target.css('transform', 'rotate(' + degree + 'deg)');
}
});
});
});
Domo2: https://jsfiddle.net/0L87uabc/10/
您能解释一下，为什么我的svg无法正确旋转以及如何解决(或者您知道最好的脚本)吗?
Can you explain, why my svg doesn't rotate correctly and how to fix it (or you know best script for this)?
推荐答案
您需要从圆心减去当前指针的位置，以获取指针相对于中心的角度. 两个值都必须在同一坐标系中，因此您必须将指针位置转换为目标(parentNode)坐标系.
you need to substract your current pointer position from the center of the circle to get the degree of the pointer relative to the center. both values need to be in the same coordinate system, so you have to transform your pointer position to the targets (parentNode) coordinate system.
var dragging = false
$(function() {
var circles = ['circle-l1', 'circle-l2', 'circle-l3', 'circle-l4', 'circle-l5', 'circle-l6', 'circle-l7'];
$.each(circles, function(ind, val) {
var target = $('#'+val)
target.mousedown(function() {
dragging = true
})
$(document).mouseup(function() {
dragging = false
})
target.mousemove(function(e) {
if (dragging) {
var ctm=target[0].parentNode.getScreenCTM()
var p=document.getElementById("rus-front").createSVGPoint()
p.x=e.clientX
p.y=e.clientY
p=p.matrixTransform(ctm.inverse())
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(1990 - p.x , 1900 - p.y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
target.css('transform', 'rotate(' + degree + 'deg)');
}
});
});
});
html, body, #circular {
width: 100%;
height: 100%;
}
#circular {
position: relative;
text-align: left;
height: 100%;
width: auto;
padding-left: 7%;
}
#circular svg {
display: inline-block;
height: 100%;
width: auto;
}
#circular [id^=circle-l] {
transform-origin: center center;
cursor: pointer;
}
#circular #circle-l1 {
transform-origin: 52% 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circular"><svg version="1.1" id="rus-front" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="4050px" height="3940px" viewBox="0 0 4050 3940" enable-background="new 0 0 4050 3940" xml:space="preserve">
<g id="circle-l7" opacity="0.9">
<g>
<defs>
<rect id="SVGID_1_" x="321.191" y="211.45" width="3361.599" height="3361.596"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#062D84" d="M3648.641,1553.511c-22.083-107.917-55.034-214.069-97.939-315.505
c-42.125-99.594-94.263-195.653-154.968-285.508c-60.128-89.001-129.181-172.693-205.241-248.753
c-76.058-76.059-159.75-145.112-248.752-205.239c-89.854-60.705-185.914-112.844-285.508-154.969
c-101.436-42.904-207.587-75.855-315.505-97.938c-110.731-22.659-224.699-34.148-338.738-34.148
c-114.04,0-228.007,11.489-338.739,34.148c-107.917,22.083-214.068,55.034-315.504,97.938
c-99.594,42.125-195.654,94.264-285.508,154.969c-89.001,60.127-172.694,129.18-248.753,205.239
c-76.059,76.06-145.112,159.752-205.24,248.753c-60.705,89.855-112.843,185.914-154.968,285.508
c-42.904,101.436-75.855,207.588-97.938,315.505c-22.66,110.731-34.148,224.699-34.148,338.737
c0,114.041,11.488,228.008,34.148,338.738c22.083,107.918,55.034,214.068,97.938,315.505
c42.125,99.595,94.263,195.653,154.968,285.507c60.128,89.002,129.181,172.694,205.24,248.754
c76.059,76.058,159.752,145.111,248.753,205.239c89.854,60.705,185.914,112.843,285.508,154.968
c101.436,42.905,207.587,75.856,315.504,97.939c110.732,22.659,224.699,34.147,338.739,34.147
c114.039,0,228.007-11.488,338.738-34.147c107.918-22.083,214.069-55.034,315.505-97.939
c99.594-42.125,195.653-94.263,285.508-154.968c89.002-60.128,172.694-129.181,248.752-205.239
c76.061-76.06,145.113-159.752,205.241-248.754c60.705-89.854,112.843-185.912,154.968-285.507
c42.905-101.437,75.856-207.587,97.939-315.505c22.659-110.73,34.146-224.697,34.146-338.738
C3682.787,1778.209,3671.3,1664.242,3648.641,1553.511z M2259.281,3514.882c-86.615,13.965-175.199,21.046-263.291,21.046
c-67.508,0-135.711-4.184-202.811-12.445c-32.126-1.359-57.291-27.626-57.291-59.798c0-33.009,26.855-59.863,59.864-59.863
c4.107,0,8.224,0.423,12.323,1.271c64.201,8.121,129.535,12.24,194.187,12.24c79.058,0,158.538-6.093,236.324-18.125
c4.522-1.082,9.147-1.629,13.743-1.629c32.457,0,58.864,26.405,58.864,58.862
C2311.194,3486.248,2288.896,3511.371,2259.281,3514.882z M2001.99,3387.884c-826.017,0-1495.636-669.618-1495.636-1495.636
S1175.974,396.612,2001.99,396.612c826.018,0,1495.636,669.619,1495.636,1495.636S2828.008,3387.884,2001.99,3387.884z"/>
</g>
</g>
<g id="circle-l6" opacity="0.9">
<g>
<defs>
<rect id="SVGID_3_" x="504.111" y="394.469" width="2995.759" height="2995.558"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_4_)" fill="#6250CC" d="M2003.554,3390.027c-100.32-0.001-201.47-10.251-300.639-30.465
c-198.086-40.374-382.338-118.337-547.644-231.722c-79.449-54.496-154.03-117.105-221.672-186.089
c-66.997-68.327-127.773-143.501-180.638-223.434c-52.865-79.932-98.255-165.28-134.91-253.676
c-37.007-89.249-65.431-182.384-84.483-276.82c-39.643-196.496-39.271-396.564,1.105-594.649
c35.365-173.511,99.97-337.23,192.018-486.609c88.944-144.342,201.223-271.788,333.718-378.799
c131.429-106.151,278.554-188.84,437.287-245.771c161.934-58.08,331.079-87.528,502.734-87.528
c100.312,0,201.462,10.249,300.639,30.463c198.085,40.376,382.339,118.34,547.643,231.725
c79.448,54.497,154.028,117.106,221.669,186.089c66.997,68.326,127.773,143.5,180.638,223.434
c52.866,79.936,98.256,165.285,134.908,253.678c37.006,89.242,65.43,182.378,84.483,276.821
c39.642,196.498,39.269,396.567-1.106,594.65c-35.365,173.51-99.969,337.227-192.017,486.607
c-88.943,144.343-201.221,271.789-333.716,378.8c-131.427,106.149-278.551,188.839-437.285,245.77
c-161.927,58.077-331.064,87.525-502.715,87.525H2003.554z M2597.964,2868.633c-5.396,0-10.772,1.368-15.55,3.957l-81.45,44.149
c-7.677,4.16-13.273,11.062-15.761,19.435c-2.483,8.369-1.561,17.209,2.6,24.887l123.196,233.408
c5.718,10.546,16.741,17.101,28.765,17.101c5.396,0,10.771-1.367,15.544-3.955l81.453-44.149
c7.678-4.16,13.274-11.062,15.761-19.434c2.485-8.371,1.563-17.21-2.598-24.888l-123.197-233.411
C2621.01,2875.188,2609.988,2868.633,2597.964,2868.633 M2001.029,784.633c-126.831,0-251.81,21.764-371.463,64.686
c-117.289,42.075-226,103.185-323.113,181.632c-97.899,79.082-180.856,173.262-246.566,279.923
c-68.004,110.384-115.724,231.362-141.836,359.572c-29.807,146.358-30.058,294.175-0.747,439.345
c14.088,69.772,35.1,138.58,62.452,204.511c27.091,65.307,60.637,128.361,99.706,187.414
c39.07,59.054,83.982,114.588,133.489,165.062c49.983,50.958,105.093,97.207,163.799,137.461
c122.142,83.752,258.285,141.332,404.642,171.14c73.223,14.912,147.9,22.474,221.956,22.474
c126.83,0,251.808-21.763,371.463-64.687c117.289-42.074,226-103.185,323.112-181.632
c97.901-79.082,180.855-173.263,246.564-279.923c68.004-110.384,115.726-231.36,141.836-359.57
c29.807-146.358,30.059-294.176,0.748-439.346c-14.088-69.777-35.1-138.585-62.452-204.513
c-27.092-65.306-60.636-128.361-99.706-187.413c-39.064-59.047-83.977-114.581-133.488-165.063
c-49.982-50.957-105.092-97.206-163.799-137.461c-122.143-83.753-258.285-141.332-404.644-171.14
C2149.766,792.194,2075.091,784.633,2001.029,784.633"/>
</g>
</g>
<g id="circle-l5" opacity="0.9">
<g>
<defs>
<rect id="SVGID_5_" x="892.197" y="782.456" transform="matrix(-0.6474 -0.7622 0.7622 -0.6474 1855.9 4643.1074)" width="2219.588" height="2219.584"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_6_)" fill="#600875" d="M1156.158,2610.723c-96.975-114.171-168.693-243.922-213.164-385.649
c-21.373-68.118-36.2-138.737-44.064-209.897c-7.79-70.483-8.821-142.11-3.065-212.892
c5.756-70.782,18.346-141.301,37.422-209.599c19.259-68.954,45.3-136.25,77.4-200.019
c66.788-132.68,158.534-249.137,272.691-346.136c114.17-97.012,243.927-168.762,385.665-213.257
c68.122-21.385,138.747-36.22,209.913-44.092c70.488-7.798,142.123-8.835,212.911-3.083
c70.789,5.751,141.315,18.339,209.621,37.414c68.962,19.258,136.266,45.3,200.043,77.402
c132.695,66.792,249.166,158.548,346.177,272.718l0.116,0.136c96.978,114.167,168.699,243.916,213.17,385.642
c21.375,68.118,36.2,138.737,44.065,209.898c7.791,70.484,8.819,142.111,3.065,212.892
c-5.756,70.783-18.347,141.303-37.423,209.603c-19.261,68.954-45.302,136.25-77.404,200.02
c-66.788,132.682-158.536,249.14-272.693,346.14c-114.17,97.012-243.925,168.761-385.663,213.256
c-68.124,21.385-138.749,36.219-209.914,44.093c-70.49,7.797-142.123,8.834-212.912,3.083
c-70.789-5.754-141.316-18.341-209.622-37.415c-68.961-19.259-136.265-45.3-200.041-77.402
c-132.695-66.792-249.166-158.548-346.177-272.719L1156.158,2610.723z M2715.987,1280.863
c-82-96.535-180.455-174.122-292.626-230.607c-108.346-54.557-224.866-87.234-346.322-97.121
c-121.456-9.888-241.726,3.511-357.47,39.825c-119.831,37.597-229.538,98.239-326.073,180.24
c-96.536,82.001-174.123,180.454-230.608,292.626c-54.557,108.347-87.233,224.866-97.123,346.323
c-9.887,121.456,3.512,241.726,39.827,357.47c37.597,119.831,98.238,229.538,180.239,326.073
c82.002,96.537,180.455,174.124,292.627,230.608c108.347,54.558,224.866,87.234,346.322,97.123
c121.457,9.886,241.727-3.513,357.471-39.828c119.831-37.597,229.538-98.238,326.074-180.239s174.123-180.455,230.607-292.626
c54.558-108.347,87.234-224.866,97.122-346.321c9.888-121.457-3.512-241.727-39.826-357.471
C2858.63,1487.107,2797.989,1377.399,2715.987,1280.863 M932.392,1981.417c0.631,10.614,4.611,20.516,11.509,28.636
c8.432,9.922,20.224,15.967,33.201,17.022c12.979,1.053,25.591-3.009,35.514-11.441c11.87-10.086,18.233-25.402,17.022-40.968
l-0.111-1.425l0.168-0.011c-9.578-113.265,0.454-226.354,29.828-336.173l-0.136-0.038l0.339-1.346
c3.85-15.271,0.078-31.536-10.091-43.507c-8.44-9.931-20.23-15.977-33.209-17.031c-12.978-1.055-25.589,3.008-35.512,11.439
c-7.291,6.196-12.555,14.317-15.224,23.483l-0.39,1.342l-0.029-0.008c-32.236,120.369-43.348,244.352-33.031,368.553l0.035-0.003
L932.392,1981.417z"/>
</g>
</g>
<path id="circle-l4" fill="#E21E26" d="M2001.792,2834.114c-33.627,0-67.734-1.843-101.375-5.478
c-125.319-13.536-245.186-51.739-356.269-113.548c-111.077-61.809-206.732-143.523-284.306-242.877
c-74.922-95.964-129.908-204.257-163.431-321.871c-33.52-117.617-43.885-238.627-30.809-359.668
c13.535-125.316,51.738-245.18,113.547-356.266c61.821-111.09,143.537-206.745,242.88-284.306
c95.962-74.925,204.255-129.911,321.87-163.431c84.49-24.079,171.398-36.288,258.312-36.288c33.621,0,67.722,1.842,101.357,5.475
c125.315,13.539,245.18,51.744,356.266,113.554c111.088,61.811,206.741,143.527,284.305,242.879
c74.927,95.962,129.913,204.254,163.432,321.869c33.52,117.614,43.887,238.624,30.811,359.667
c-13.537,125.317-51.74,245.184-113.547,356.268c-61.816,111.087-143.531,206.741-242.877,284.305
c-95.961,74.923-204.254,129.908-321.873,163.43C2175.601,2821.906,2088.698,2834.114,2001.792,2834.114 M2000.197,1254.975
c-51.842,0-103.776,6.416-154.361,19.07c-82.859,20.729-159.761,57.504-228.573,109.305
c-71.914,54.133-130.386,121.136-173.79,199.146c-59.259,106.502-86.722,227.296-79.419,349.322
c7.491,125.146,51.469,244.454,127.179,345.027c51.802,68.819,115.533,125.43,189.422,168.264
c71.371,41.374,149.164,68.222,231.219,79.798c29.832,4.208,60.082,6.342,89.91,6.343h0.015c51.834,0,103.762-6.416,154.35-19.068
c82.851-20.728,159.755-57.503,228.574-109.307c71.91-54.135,130.382-121.138,173.789-199.148
c59.258-106.496,86.72-227.288,79.418-349.32c-7.484-125.133-51.46-244.441-127.174-345.026
c-51.8-68.813-115.533-125.426-189.425-168.268c-71.373-41.374-149.166-68.221-231.222-79.795
C2060.272,1257.108,2030.022,1254.975,2000.197,1254.975 M1322.123,1960.018c-0.796,0-1.602,0.061-2.395,0.182l-207.379,31.588
c-4.887,0.74-9.067,3.645-11.468,7.968c-1.72,3.089-2.346,6.575-1.812,10.08c0.638,4.188,2.865,7.874,6.272,10.38
c2.744,2.02,5.978,3.087,9.352,3.087c0.805,0,1.619-0.063,2.422-0.185l207.382-31.592c4.883-0.738,9.063-3.644,11.47-7.969
c1.719-3.089,2.344-6.572,1.81-10.075C1336.606,1965.806,1329.876,1960.018,1322.123,1960.018"/>
<g id="circle-l3" opacity="0.9">
<g>
<defs>
<rect id="SVGID_7_" x="1359.715" y="1249.978" transform="matrix(0.0042 -1 1 0.0042 101.4478 3886.3657)" width="1284.55" height="1284.54"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_8_)" fill="#420351" d="M2387.222,1378.378c-283.801-212.757-686.34-155.166-899.097,128.634
c-212.759,283.802-155.166,686.346,128.634,899.1c283.802,212.76,686.343,155.166,899.101-128.637
C2728.614,1993.674,2671.025,1591.134,2387.222,1378.378 M1827.783,2459.995c-11.949,15.937-33.229,20.743-50.551,12.521
c-51.833-20.053-101.82-47.429-148.475-82.406c-32.185-24.127-61.344-50.792-87.433-79.493
c-15.5-14.118-18.02-37.974-5.183-55.095c13.637-18.19,39.437-21.882,57.63-8.243c3.044,2.283,5.672,4.911,7.893,7.782
c22.746,25.08,48.18,48.374,76.281,69.442c40.122,30.079,83.078,53.696,127.622,71.057c4.911,1.322,9.655,3.571,13.97,6.806
C1837.726,2416.003,1841.419,2441.805,1827.783,2459.995 M1886.993,2393.569c-276.461-63.945-448.74-339.896-384.794-616.359
c63.945-276.46,339.897-448.739,616.359-384.794c276.458,63.946,448.737,339.896,384.792,616.359
C2439.406,2285.237,2163.452,2457.515,1886.993,2393.569"/>
</g>
</g>
<g id="circle-l2" opacity="0.9">
<g>
<defs>
<rect id="SVGID_9_" x="1486.775" y="1377.038" transform="matrix(0.2791 -0.9602 0.9602 0.2791 -373.8815 3286.4509)" width="1030.43" height="1030.419"/>
</defs>
<clipPath id="SVGID_10_">
<use xlink:href="#SVGID_9_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_10_)" fill="#EE4723" d="M1505.475,1754.715c18.568-67.027,49.707-128.417,92.553-182.457
c41.385-52.2,91.893-95.38,150.124-128.348c58.227-32.97,121.241-54.064,187.295-62.696c68.385-8.934,137.046-4.05,204.072,14.517
c66.957,18.542,128.286,49.638,182.286,92.417c52.158,41.317,95.326,91.743,128.308,149.879
c32.977,58.135,54.113,121.056,62.818,187.018c9.013,68.286,4.244,136.863-14.18,203.829l-0.25,0.905
c-18.568,67.026-49.707,128.416-92.551,182.455c-41.385,52.198-91.893,95.381-150.124,128.35
c-58.229,32.968-121.244,54.061-187.294,62.689c-68.387,8.935-137.049,4.052-204.075-14.514
c-66.954-18.543-128.285-49.639-182.284-92.418c-52.16-41.313-95.331-91.741-128.308-149.877
c-32.98-58.134-54.115-121.054-62.821-187.018c-9.011-68.282-4.243-136.859,14.177-203.82L1505.475,1754.715z M1814.624,1971.048
c0.972-3.53,0.747-7.189-0.65-10.584c-1.669-4.053-4.816-7.217-8.864-8.906c-4.048-1.685-8.508-1.695-12.561-0.029
l-241.407,99.339c-4.729,1.946-8.224,5.896-9.581,10.834c-0.973,3.53-0.745,7.193,0.654,10.591
c1.667,4.055,4.81,7.216,8.858,8.904c4.048,1.685,8.507,1.696,12.563,0.027l241.404-99.339
C1809.771,1979.938,1813.267,1975.987,1814.624,1971.048 M2176.272,1940.152c17.249-62.7-0.518-130.235-46.365-176.256
c-70.575-70.835-185.62-71.046-256.454-0.479c-22.334,22.25-38.534,49.982-46.844,80.199
c-17.249,62.702,0.518,130.24,46.362,176.259c34.19,34.315,79.692,53.264,128.129,53.352c48.438,0.09,94.013-18.69,128.329-52.875
C2151.764,1998.098,2167.963,1970.367,2176.272,1940.152"/>
</g>
</g>
<g id="circle-l1" opacity="0.9">
<g>
<defs>
<rect id="SVGID_11_" x="1818.64" y="1708.893" width="366.701" height="366.71"/>
</defs>
<clipPath id="SVGID_12_">
<use xlink:href="#SVGID_11_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_12_)" fill="#600875" d="M2001.76,2075.607c-31.688-0.003-63.063-8.355-90.733-24.156
c-87.78-50.125-118.418-162.321-68.297-250.104c32.564-57.027,93.631-92.453,159.369-92.453c31.683,0,63.058,8.353,90.734,24.157
c42.525,24.281,73.049,63.668,85.95,110.907c12.899,47.238,6.631,96.672-17.651,139.198
c-32.563,57.025-93.627,92.452-159.356,92.452H2001.76z M1937.229,1983.269c-9.241,0-17.825,4.979-22.402,12.992
c-3.413,5.976-4.294,12.923-2.48,19.563c1.813,6.641,6.103,12.177,12.081,15.591c0.832,0.474,1.746,0.925,2.719,1.34
c22.98,12.237,48.777,18.694,74.648,18.694c12.949,0,25.902-1.588,38.5-4.719c7.924-1.184,14.697-5.813,18.638-12.71
c3.412-5.976,4.294-12.923,2.48-19.563c-1.813-6.641-6.103-12.176-12.08-15.586c-3.882-2.22-8.286-3.393-12.736-3.393
c-2.396,0-4.783,0.334-7.097,0.992c-9.037,2.39-18.337,3.6-27.65,3.6c-17.795,0-35.51-4.502-51.231-13.019l-0.149-0.092
c-0.161-0.103-0.322-0.203-0.488-0.298C1946.089,1984.442,1941.681,1983.269,1937.229,1983.269"/>
</g>
</g>
</svg></div>
这篇关于通过mousemove/touchmove错误进行SVG角度旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
