javascript - Paintcode 和 Snap SVG

Question

我正在尝试桥接 Paintcode 中的示例和 Snap SVG .

Here是一个简单的项目，拖动 slider 时齿轮会旋转。这很棒，但我想用鼠标进行交互。

这是 svg 格式的齿轮示例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="200"  xml:space="preserve" id="gears">
    <!-- Generated by PaintCode - http://www.paintcodeapp.com -->
    <path id="gears-largeGear" stroke="none" fill="rgb(69, 131, 212)" d="M 2.78,-67.94 C 3.71,-63.88 4.74,-59.43 5.59,-55.72 7.73,-55.51 9.84,-55.18 11.9,-54.73 13.87,-58 16.21,-61.91 18.36,-65.49 20.15,-64.99 21.91,-64.42 23.64,-63.78 23.27,-59.62 22.87,-55.08 22.54,-51.28 24.5,-50.42 26.4,-49.45 28.23,-48.37 31.11,-50.87 34.55,-53.87 37.69,-56.6 39.24,-55.58 40.73,-54.49 42.18,-53.34 40.55,-49.5 38.77,-45.3 37.28,-41.79 38.87,-40.37 40.37,-38.87 41.79,-37.28 45.3,-38.77 49.5,-40.55 53.34,-42.18 54.49,-40.73 55.58,-39.24 56.6,-37.69 53.87,-34.55 50.87,-31.11 48.37,-28.23 49.45,-26.4 50.42,-24.5 51.28,-22.54 55.08,-22.87 59.62,-23.27 63.78,-23.64 64.42,-21.91 64.99,-20.15 65.49,-18.36 61.91,-16.21 58,-13.87 54.73,-11.9 55.18,-9.84 55.51,-7.73 55.72,-5.59 59.43,-4.74 63.88,-3.71 67.94,-2.78 67.98,-1.86 68,-0.93 68,0 68,0.93 67.98,1.86 67.94,2.78 63.88,3.71 59.43,4.74 55.72,5.59 55.51,7.73 55.18,9.84 54.73,11.9 58,13.87 61.91,16.21 65.49,18.36 64.99,20.15 64.42,21.91 63.78,23.64 59.62,23.27 55.08,22.87 51.28,22.54 50.42,24.5 49.45,26.4 48.37,28.23 50.87,31.11 53.87,34.55 56.6,37.69 55.58,39.24 54.49,40.73 53.34,42.18 49.5,40.55 45.3,38.77 41.79,37.28 40.37,38.87 38.87,40.37 37.28,41.79 38.77,45.3 40.55,49.5 42.18,53.34 40.73,54.49 39.24,55.58 37.69,56.6 34.55,53.87 31.11,50.87 28.23,48.37 26.4,49.45 24.5,50.42 22.54,51.28 22.87,55.08 23.27,59.62 23.64,63.78 21.91,64.42 20.15,64.99 18.36,65.49 16.21,61.91 13.87,58 11.9,54.73 9.84,55.18 7.73,55.51 5.59,55.72 4.74,59.43 3.71,63.88 2.78,67.94 1.86,67.98 0.93,68 -0,68 -0.93,68 -1.86,67.98 -2.78,67.94 -3.71,63.88 -4.74,59.43 -5.59,55.72 -7.73,55.51 -9.84,55.18 -11.9,54.73 -13.87,58 -16.21,61.91 -18.36,65.49 -20.15,64.99 -21.91,64.42 -23.64,63.78 -23.27,59.62 -22.87,55.08 -22.54,51.28 -24.5,50.42 -26.4,49.45 -28.23,48.37 -31.11,50.87 -34.55,53.87 -37.69,56.6 -39.24,55.58 -40.73,54.49 -42.18,53.34 -40.55,49.5 -38.77,45.3 -37.28,41.79 -38.87,40.37 -40.37,38.87 -41.79,37.28 -45.3,38.77 -49.5,40.55 -53.34,42.18 -54.49,40.73 -55.58,39.24 -56.6,37.69 -53.87,34.55 -50.87,31.11 -48.37,28.23 -49.45,26.4 -50.42,24.5 -51.28,22.54 -55.08,22.87 -59.62,23.27 -63.78,23.64 -64.42,21.91 -64.99,20.15 -65.49,18.36 -61.91,16.21 -58,13.87 -54.73,11.9 -55.18,9.84 -55.51,7.73 -55.72,5.59 -59.43,4.74 -63.88,3.71 -67.94,2.78 -67.98,1.86 -68,0.93 -68,-0 -68,-0.93 -67.98,-1.86 -67.94,-2.78 -63.88,-3.71 -59.43,-4.74 -55.72,-5.59 -55.51,-7.73 -55.18,-9.84 -54.73,-11.9 -58,-13.87 -61.91,-16.21 -65.49,-18.36 -64.99,-20.15 -64.42,-21.91 -63.78,-23.64 -59.62,-23.27 -55.08,-22.87 -51.28,-22.54 -50.42,-24.5 -49.45,-26.4 -48.37,-28.23 -50.87,-31.11 -53.87,-34.55 -56.6,-37.69 -55.58,-39.24 -54.49,-40.73 -53.34,-42.18 -49.5,-40.55 -45.3,-38.77 -41.79,-37.28 -40.37,-38.87 -38.87,-40.37 -37.28,-41.79 -38.77,-45.3 -40.55,-49.5 -42.18,-53.34 -41.55,-53.84 -40.91,-54.33 -40.26,-54.81 -39.42,-55.43 -38.56,-56.03 -37.69,-56.6 -34.55,-53.87 -31.11,-50.87 -28.23,-48.37 -26.4,-49.45 -24.5,-50.42 -22.54,-51.28 -22.87,-55.08 -23.27,-59.62 -23.64,-63.78 -21.91,-64.42 -20.15,-64.99 -18.36,-65.49 -16.21,-61.91 -13.87,-58 -11.9,-54.73 -9.84,-55.18 -7.73,-55.51 -5.59,-55.72 -4.74,-59.43 -3.71,-63.88 -2.78,-67.94 -1.93,-67.98 -1.08,-68 -0.23,-68 L 0,-68 C 0.93,-68 1.86,-67.98 2.78,-67.94 Z M 0,-36 C -6.22,-36 -12.07,-34.42 -17.18,-31.65 -28.39,-25.55 -36,-13.66 -36,-0 -36,19.88 -19.88,36 0,36 19.88,36 36,19.88 36,-0 36,-19.88 19.88,-36 0,-36 Z M 0,-36" transform="translate(150, 96) rotate(-0.5)"  />
    <path id="gears-smallGear" stroke="none" fill="rgb(115, 152, 218)" d="M 2.12,-37.94 L 2.45,-37.92 C 3.29,-34.48 4.2,-30.71 4.97,-27.56 6.23,-27.34 7.46,-27.03 8.65,-26.64 9.87,-26.24 11.04,-25.77 12.18,-25.22 14.65,-27.32 17.61,-29.83 20.31,-32.12 21.69,-31.25 23.02,-30.28 24.27,-29.24 22.92,-25.96 21.45,-22.37 20.22,-19.37 21.97,-17.55 23.47,-15.49 24.68,-13.24 27.91,-13.49 31.78,-13.78 35.32,-14.05 35.92,-12.54 36.42,-10.99 36.83,-9.39 33.81,-7.53 30.5,-5.49 27.75,-3.79 27.91,-2.55 28,-1.29 28,-0 28,1.29 27.91,2.55 27.75,3.79 30.51,5.49 33.81,7.53 36.83,9.39 36.42,10.99 35.92,12.54 35.32,14.05 31.78,13.78 27.91,13.49 24.68,13.24 23.47,15.49 21.97,17.55 20.22,19.37 21.45,22.37 22.92,25.96 24.27,29.24 23.02,30.28 21.69,31.25 20.31,32.12 17.61,29.83 14.65,27.32 12.18,25.22 9.93,26.31 7.51,27.11 4.97,27.56 4.2,30.71 3.29,34.48 2.45,37.92 1.64,37.97 0.82,38 -0,38 -0.82,38 -1.64,37.97 -2.45,37.92 -3.29,34.48 -4.2,30.71 -4.97,27.56 -7.51,27.11 -9.93,26.31 -12.18,25.22 -14.65,27.32 -17.61,29.83 -20.31,32.12 -21.69,31.25 -23.02,30.28 -24.27,29.24 -22.92,25.96 -21.45,22.37 -20.22,19.37 -21.97,17.55 -23.47,15.49 -24.68,13.24 -27.91,13.49 -31.78,13.78 -35.32,14.05 -35.92,12.54 -36.42,10.99 -36.83,9.39 -33.81,7.53 -30.5,5.49 -27.75,3.79 -27.91,2.55 -28,1.29 -28,-0 -28,-1.29 -27.91,-2.55 -27.75,-3.79 -30.51,-5.49 -33.81,-7.53 -36.83,-9.39 -36.42,-10.99 -35.92,-12.54 -35.32,-14.05 -31.78,-13.78 -27.91,-13.49 -24.68,-13.24 -23.47,-15.49 -21.97,-17.55 -20.22,-19.37 -21.45,-22.37 -22.92,-25.96 -24.27,-29.24 -23.02,-30.28 -21.69,-31.25 -20.31,-32.12 -17.61,-29.83 -14.65,-27.32 -12.18,-25.22 -9.93,-26.31 -7.51,-27.11 -4.97,-27.56 -4.2,-30.71 -3.29,-34.48 -2.45,-37.92 -1.64,-37.97 -0.82,-38 0,-38 0.71,-38 1.42,-37.98 2.12,-37.94 Z M 0,-14 C -7.73,-14 -14,-7.73 -14,-0 -14,7.73 -7.73,14 0,14 7.73,14 14,7.73 14,-0 14,-5.48 10.85,-10.22 6.27,-12.52 4.38,-13.47 2.25,-14 0,-14 Z M 0,-14" transform="translate(62, 137) rotate(1)"  />
</svg>

我想要解决的是如何在 gears-largeGear 或 gears-smallGear 一个或另一个齿轮内单击并拖动鼠标使它们旋转类似于 slider 的工作方式。

搜索了一下，似乎 Snap SVG 是实现此目的的好方法，但我一直在努力将 SVG 和 Snap 文档连接在一起。在 Snap 中，我了解了如何加载 SVG，但不太了解如何获取 path 或 group 来设置交互和旋转。

如果我使用像 gears-largeGroup 和 gears-smallGroup 这样的组，它的代码类型是否与动画路径相同？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="200"  xml:space="preserve" id="gears">
    <!-- Generated by PaintCode - http://www.paintcodeapp.com -->
    <g id="gears-largeGroup" transform="translate(149.59, 96.41)" >
        <path id="gears-largeGear" stroke="none" fill="rgb(69, 131, 212)" d="M 2.78,-67.94 C 3.71,-63.88 4.74,-59.43 5.59,-55.72 7.73,-55.51 9.84,-55.18 11.9,-54.73 13.87,-58 16.21,-61.91 18.36,-65.49 20.15,-64.99 21.91,-64.42 23.64,-63.78 23.27,-59.62 22.87,-55.08 22.54,-51.28 24.5,-50.42 26.4,-49.45 28.23,-48.37 31.11,-50.87 34.55,-53.87 37.69,-56.6 39.24,-55.58 40.73,-54.49 42.18,-53.34 40.55,-49.5 38.77,-45.3 37.28,-41.79 38.87,-40.37 40.37,-38.87 41.79,-37.28 45.3,-38.77 49.5,-40.55 53.34,-42.18 54.49,-40.73 55.58,-39.24 56.6,-37.69 53.87,-34.55 50.87,-31.11 48.37,-28.23 49.45,-26.4 50.42,-24.5 51.28,-22.54 55.08,-22.87 59.62,-23.27 63.78,-23.64 64.42,-21.91 64.99,-20.15 65.49,-18.36 61.91,-16.21 58,-13.87 54.73,-11.9 55.18,-9.84 55.51,-7.73 55.72,-5.59 59.43,-4.74 63.88,-3.71 67.94,-2.78 67.98,-1.86 68,-0.93 68,0 68,0.93 67.98,1.86 67.94,2.78 63.88,3.71 59.43,4.74 55.72,5.59 55.51,7.73 55.18,9.84 54.73,11.9 58,13.87 61.91,16.21 65.49,18.36 64.99,20.15 64.42,21.91 63.78,23.64 59.62,23.27 55.08,22.87 51.28,22.54 50.42,24.5 49.45,26.4 48.37,28.23 50.87,31.11 53.87,34.55 56.6,37.69 55.58,39.24 54.49,40.73 53.34,42.18 49.5,40.55 45.3,38.77 41.79,37.28 40.37,38.87 38.87,40.37 37.28,41.79 38.77,45.3 40.55,49.5 42.18,53.34 40.73,54.49 39.24,55.58 37.69,56.6 34.55,53.87 31.11,50.87 28.23,48.37 26.4,49.45 24.5,50.42 22.54,51.28 22.87,55.08 23.27,59.62 23.64,63.78 21.91,64.42 20.15,64.99 18.36,65.49 16.21,61.91 13.87,58 11.9,54.73 9.84,55.18 7.73,55.51 5.59,55.72 4.74,59.43 3.71,63.88 2.78,67.94 1.86,67.98 0.93,68 -0,68 -0.93,68 -1.86,67.98 -2.78,67.94 -3.71,63.88 -4.74,59.43 -5.59,55.72 -7.73,55.51 -9.84,55.18 -11.9,54.73 -13.87,58 -16.21,61.91 -18.36,65.49 -20.15,64.99 -21.91,64.42 -23.64,63.78 -23.27,59.62 -22.87,55.08 -22.54,51.28 -24.5,50.42 -26.4,49.45 -28.23,48.37 -31.11,50.87 -34.55,53.87 -37.69,56.6 -39.24,55.58 -40.73,54.49 -42.18,53.34 -40.55,49.5 -38.77,45.3 -37.28,41.79 -38.87,40.37 -40.37,38.87 -41.79,37.28 -45.3,38.77 -49.5,40.55 -53.34,42.18 -54.49,40.73 -55.58,39.24 -56.6,37.69 -53.87,34.55 -50.87,31.11 -48.37,28.23 -49.45,26.4 -50.42,24.5 -51.28,22.54 -55.08,22.87 -59.62,23.27 -63.78,23.64 -64.42,21.91 -64.99,20.15 -65.49,18.36 -61.91,16.21 -58,13.87 -54.73,11.9 -55.18,9.84 -55.51,7.73 -55.72,5.59 -59.43,4.74 -63.88,3.71 -67.94,2.78 -67.98,1.86 -68,0.93 -68,-0 -68,-0.93 -67.98,-1.86 -67.94,-2.78 -63.88,-3.71 -59.43,-4.74 -55.72,-5.59 -55.51,-7.73 -55.18,-9.84 -54.73,-11.9 -58,-13.87 -61.91,-16.21 -65.49,-18.36 -64.99,-20.15 -64.42,-21.91 -63.78,-23.64 -59.62,-23.27 -55.08,-22.87 -51.28,-22.54 -50.42,-24.5 -49.45,-26.4 -48.37,-28.23 -50.87,-31.11 -53.87,-34.55 -56.6,-37.69 -55.58,-39.24 -54.49,-40.73 -53.34,-42.18 -49.5,-40.55 -45.3,-38.77 -41.79,-37.28 -40.37,-38.87 -38.87,-40.37 -37.28,-41.79 -38.77,-45.3 -40.55,-49.5 -42.18,-53.34 -41.55,-53.84 -40.91,-54.33 -40.26,-54.81 -39.42,-55.43 -38.56,-56.03 -37.69,-56.6 -34.55,-53.87 -31.11,-50.87 -28.23,-48.37 -26.4,-49.45 -24.5,-50.42 -22.54,-51.28 -22.87,-55.08 -23.27,-59.62 -23.64,-63.78 -21.91,-64.42 -20.15,-64.99 -18.36,-65.49 -16.21,-61.91 -13.87,-58 -11.9,-54.73 -9.84,-55.18 -7.73,-55.51 -5.59,-55.72 -4.74,-59.43 -3.71,-63.88 -2.78,-67.94 -1.93,-67.98 -1.08,-68 -0.23,-68 L 0,-68 C 0.93,-68 1.86,-67.98 2.78,-67.94 Z M 0,-36 C -6.22,-36 -12.07,-34.42 -17.18,-31.65 -28.39,-25.55 -36,-13.66 -36,-0 -36,19.88 -19.88,36 0,36 19.88,36 36,19.88 36,-0 36,-19.88 19.88,-36 0,-36 Z M 0,-36" transform="rotate(-38)"  />
    </g>
    <g id="gears-smallGroup" transform="translate(62, 137)" >
        <path id="gears-smallGear" stroke="none" fill="rgb(115, 152, 218)" d="M 2.12,-37.94 L 2.45,-37.92 C 3.29,-34.48 4.2,-30.71 4.97,-27.56 6.23,-27.34 7.46,-27.03 8.65,-26.64 9.87,-26.24 11.04,-25.77 12.18,-25.22 14.65,-27.32 17.61,-29.83 20.31,-32.12 21.69,-31.25 23.02,-30.28 24.27,-29.24 22.92,-25.96 21.45,-22.37 20.22,-19.37 21.97,-17.55 23.47,-15.49 24.68,-13.24 27.91,-13.49 31.78,-13.78 35.32,-14.05 35.92,-12.54 36.42,-10.99 36.83,-9.39 33.81,-7.53 30.5,-5.49 27.75,-3.79 27.91,-2.55 28,-1.29 28,-0 28,1.29 27.91,2.55 27.75,3.79 30.51,5.49 33.81,7.53 36.83,9.39 36.42,10.99 35.92,12.54 35.32,14.05 31.78,13.78 27.91,13.49 24.68,13.24 23.47,15.49 21.97,17.55 20.22,19.37 21.45,22.37 22.92,25.96 24.27,29.24 23.02,30.28 21.69,31.25 20.31,32.12 17.61,29.83 14.65,27.32 12.18,25.22 9.93,26.31 7.51,27.11 4.97,27.56 4.2,30.71 3.29,34.48 2.45,37.92 1.64,37.97 0.82,38 -0,38 -0.82,38 -1.64,37.97 -2.45,37.92 -3.29,34.48 -4.2,30.71 -4.97,27.56 -7.51,27.11 -9.93,26.31 -12.18,25.22 -14.65,27.32 -17.61,29.83 -20.31,32.12 -21.69,31.25 -23.02,30.28 -24.27,29.24 -22.92,25.96 -21.45,22.37 -20.22,19.37 -21.97,17.55 -23.47,15.49 -24.68,13.24 -27.91,13.49 -31.78,13.78 -35.32,14.05 -35.92,12.54 -36.42,10.99 -36.83,9.39 -33.81,7.53 -30.5,5.49 -27.75,3.79 -27.91,2.55 -28,1.29 -28,-0 -28,-1.29 -27.91,-2.55 -27.75,-3.79 -30.51,-5.49 -33.81,-7.53 -36.83,-9.39 -36.42,-10.99 -35.92,-12.54 -35.32,-14.05 -31.78,-13.78 -27.91,-13.49 -24.68,-13.24 -23.47,-15.49 -21.97,-17.55 -20.22,-19.37 -21.45,-22.37 -22.92,-25.96 -24.27,-29.24 -23.02,-30.28 -21.69,-31.25 -20.31,-32.12 -17.61,-29.83 -14.65,-27.32 -12.18,-25.22 -9.93,-26.31 -7.51,-27.11 -4.97,-27.56 -4.2,-30.71 -3.29,-34.48 -2.45,-37.92 -1.64,-37.97 -0.82,-38 0,-38 0.71,-38 1.42,-37.98 2.12,-37.94 Z M 0,-14 C -7.73,-14 -14,-7.73 -14,-0 -14,7.73 -7.73,14 0,14 7.73,14 14,7.73 14,-0 14,-5.48 10.85,-10.22 6.27,-12.52 4.38,-13.47 2.25,-14 0,-14 Z M 0,-14" transform="rotate(-3)"  />
    </g>
</svg>

在 Javascript 中进行鼠标点击测试和交互会比使用 Snap 更容易吗？

Answer 1

编辑:请参阅下方的改进方法

首先，将变换从第二个示例中的组移动到路径可能会更容易。然后，您可以将任何旋转变换添加到组中，而不会变得太困惑。例如。

<g id="gears-largeGroup"  >
    <path transform="translate(149.59, 96.41)" id="gears-largeGear"..... 

获得 SVG 后，您可以使用 Snap.select() 方法在 Snap 中选择它。这需要一个 CSS 选择器。

所以我们可以找到一个

Snap.select('#gears-smallGroup')

现在我们有了装备，我们可以向其添加拖动处理程序。

Snap.select('#gears-smallGroup').drag( dragRotate, dragStart )

所以我们只需要编写我们的处理程序。首先，我们要存储拖动的开始位置(请参阅最后的更新解决方案，这更好)，因此我们可以编写 startRotate 函数。这只是将 x,y 对象存储在元素旁边。

function dragRotateStart( x, y ) {
  this.data('oxy', { x: x, y: y })
}

然后我们可以编写主要的拖动旋转处理程序。这将获取上面存储的原始起始位置 oxy，并将其添加到传递的拖动增量增量中。

然后我们使用 Snaps angle() 方法来计算两点之间的 Angular 。一个是我们刚刚获得的 x,y，另一个是元素的中心。

现在我们有了 Angular ，我们可以进行旋转变换。 Snap 可以使用缩写形式进行变换(r=旋转、t=平移、s=缩放，并且 Snap 的 r&s 将从其中心进行变换，除非指定)。

所以这就变成了

function dragRotate( dx, dy, x, y ) {
  this.transform('r' + Snap.angle( this.getBBox().cx, this.getBBox().cy, dx + this.data('oxy').x, dy + this.data('oxy').y ) );
}

所以整个代码...

Snap.select('#gears-smallGroup').drag( dragRotate, dragRotateStart )  
Snap.select('#gears-largeGroup').drag( dragRotate, dragRotateStart ) 

function dragRotate( dx, dy, x, y ) {
  this.transform('r' + Snap.angle( this.getBBox().cx, this.getBBox().cy, dx + this.data('oxy').x, dy + this.data('oxy').y ) );
}

function dragRotateStart( x, y ) {
  this.data('oxy', { x: x, y: y })
}

jsfiddle

现在你有了这个，你可以摆弄它，这样一个就可以旋转另一个。您可能还需要在重新拖动后检查起点，具体取决于新拖动的起始位置。

(快速让较小的齿轮旋转更大的齿轮jsfiddle)

更新和改进版本:

进一步扩展，您需要对其进行调整，以考虑起始旋转(如果是预旋转)和拖动中的起始 Angular ，我们只需要 Angular 差异，所以它不需要重置。

因此我们可以存储起始位。拖动开始的 Angular 是多少(我将默认值设置为 10，因为图像点偏移了大约 10 度)。元素的旧旋转是什么。

function dragRotateStart(x, y) {
  this.data('startingAngle', Snap.angle(this.getBBox().cx, this.getBBox().cy, x, y));
  this.data('startingRotation', this.data('rotation')||10)
}

然后从起始旋转计算正确的旋转，加上 Angular 差，然后将其存储(因此，如果我们稍后再次拖动，我们就知道它的最后一个旋转是什么)...

function dragRotate(dx, dy, x, y) {
  var angleDiff = Snap.angle(this.getBBox().cx, this.getBBox().cy, x, y) - this.data('startingAngle')
  var newRotation = angleDiff + +this.data('startingRotation');
  this.data('rotation', newRotation)
  this.transform('r' + newRotation); 
} 

jsfiddle