touchmove错误进行SVG角度旋转

touchmove错误进行SVG角度旋转

本文介绍了通过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:

  1. 旋转仅在圆形的下部起作用,在顶部-反向旋转.
  2. 旋转非常缓慢(在演示轮中,鼠标/手指强烈跟随旋转).

我的演示: 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角度旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 05:19