Самый простой способ отследить форму с помощью прикосновения в реагировать на родную? - PullRequest
Новая
       26

Самый простой способ отследить форму с помощью прикосновения в реагировать на родную?

8 голосов
/ 04 ноября 2019

Я пытаюсь сделать экран подтверждения в своем собственном приложении, и мне нужно, чтобы пользователь проследил эллипс, чтобы подтвердить свое действие - что-то вроде того, что делает отель сегодня вечером со своим логотипом. Есть ли библиотека, которую я могу использовать для отслеживания пользователя через svg?

Вот пример того, что будет делать пользователь:

Ответы [ 4 ]

3 голосов
/ 07 ноября 2019

Я нашел кого-то еще, пытающегося сделать это , я не думаю, что это самый творческий подход, был способ сделать это мгновенно много лет назад.

Iзнать, что SVG используется для анимации штриховой графики, есть много учебных пособий:

https://medium.com/@sterling.meghan/svg-line-animation-for-beginners-51857c88357f

Также есть библиотека для SVG, которая называется Reaction-native-svg , дело в том, что объекты SVG можно перетаскивать в javascript

http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

Так что моя идея для решения этой проблемы заключается в следующем: у вас есть два слоя друг на друге.

Верхний заполняет весь экран и имеет разрез, то есть форму, подлежащую трассировке (штриховой рисунок)

Чтобы добраться до находящегося позади SVG-объекта, вы можете только сделать это. через этот разрез. Вы можете показать маленький кружок в начальной точке, который является частью большой цветной фигуры SVG, которая находится под разрезом, эта фигура является вторым слоем.

Пользователь начинает трассировку, но на самом деле он перетаскивает этот большой объект SVG из одной точки в другую, ему нужно следовать по пути, аналогичному трассировке, потому что только если он сделает это, он сможет перетащить объект черездыра. (Он может добраться до объекта во втором слое только через отверстие)

Перетаскиваемый объект SVG имеет цвет, отличный от верхнего слоя, поэтому при перетаскивании пользователем он выглядит как заполнение пути.

Надеюсь, это поможет вам или, по крайней мере, даст вам некоторые идеи. Кроме того, вы можете анимировать другой SVG, когда пользователь завершит трассировку, с помощью CSS-анимации. Я, наверное, попробую это, когда у меня будет время.

0 голосов
/ 13 ноября 2019

Обычно, когда мы говорим о работе над SVG, первая библиотека, которая приходит мне в голову, это D3 Js, в d3 вы можете следовать по пути любой формы в SVG, и мы можем создать интерполяцию. Один из таких примеров приведен ниже,Посмотрите, может ли это вам чем-нибудь помочь. 

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>

<div id="loader_container"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

function loader(config) {
  return function() {
    var radius = Math.min(config.width, config.height) / 2;
    var tau = 2 * Math.PI;

    var arc = d3.svg.arc()
            .innerRadius(radius*0.5)
            .outerRadius(radius*0.9)
            .startAngle(0);

    var svg = d3.select(config.container).append("svg")
        .attr("id", config.id)
        .attr("width", config.width)
        .attr("height", config.height)
      .append("g")
        .attr("transform", "translate(" + config.width / 2 + "," + config.height / 2 + ")")

    var background = svg.append("path")
            .datum({endAngle: 0.33*tau})
            .style("fill", "#4D4D4D")
            .attr("d", arc)
            .call(spin, 1500)

    function spin(selection, duration) {
        selection.transition()
            .ease("linear")
            .duration(duration)
            .attrTween("transform", function() {
                return d3.interpolateString("rotate(0)", "rotate(360)");
            });

        setTimeout(function() { spin(selection, duration); }, duration);
    }

    function transitionFunction(path) {
        path.transition()
            .duration(7500)
            .attrTween("stroke-dasharray", tweenDash)
            .each("end", function() { d3.select(this).call(transition); });
    }

  };
}


var myLoader = loader({width: 960, height: 500, container: "#loader_container", id: "loader"});
myLoader();

</script>

</body>
</html>

Источник: http://bl.ocks.org/MattWoelk/6132258

Вы можете настроить интерполяцию с любыми типами, String, датировать что угодно. Для интерполяции приведенная ниже ссылка может помочь

https://bl.ocks.org/mbostock/3173784

http://jsfiddle.net/SHF2M/

https://codepen.io/frcodecamp/pen/wxXypx

Построить внешнюю форму SVG в виде двух эллипсов, соединенныхлинии с обеих сторон, тогда мы можем использовать эллиптический путь для интерполяции с использованием позиций поворота. Положение поворота должно зависеть от хода выполнения на экране подтверждения.

0 голосов
/ 13 ноября 2019

Для распознавания вы можете использовать rn-жест-распознаватель, встроенный в пакет rn-draw: https://www.npmjs.com/package/rn-gesture-recognizer

(https://www.npmjs.com/package/rn-draw)

И тогда вы можете, например, создать свой идеальныйФорма CSS над вашим SVG: https://codedaily.io/tutorials/22/The-Shapes-of-React-Native

Кроме того, вы можете делать другие вещи, как это: https://codedaily.io/tutorials/55/Create-a-Draggable-Opacity-Changing-Circle-with-Reanimated-in-React-Native

0 голосов
/ 11 ноября 2019

Я столкнулся с похожей ситуацией, в которой я использовал реагировать-родной-эскиз-холст

Я заставил пользователя рисовать на холсте и сравнил путь вывода с предопределеннымдорожка. Это не было идеальным решением, но было достаточно для моих требований.

...