A maneira mais fácil de rastrear uma forma com o toque em reagir nativo?

8

Estou tentando fazer uma tela de confirmação no meu aplicativo nativo de reação e preciso que o usuário rastreie uma elipse para confirmar sua ação - mais ou menos como o hotel hoje à noite faz com seu logotipo. Existe uma biblioteca que eu possa usar para que o usuário rastreie um svg?

Aqui está um exemplo do que o usuário estaria fazendo:

react-native svg touch

— looneydoodle
fonte

3

Encontrei outra pessoa tentando fazer isso , não acho que seja a abordagem mais criativa, havia uma maneira de fazer isso em flash há muitos anos.

Sei que o SVG está sendo usado para animação de arte de linha, existem muitos tutoriais por aí:

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

Além disso, existe uma biblioteca para SVG chamada react-native-svg , a coisa é que objetos SVG podem ser arrastados em javascript

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

Então, minha ideia para resolver isso seria a seguinte: você tem duas camadas uma em cima da outra.

A de cima preenche a tela inteira e tem um corte, que é a forma a ser rastreada (a arte da linha)

Para chegar ao objeto SVG que está atrás, você só pode fazê-lo através deste corte. Você pode mostrar um pequeno círculo no ponto de partida que faz parte de uma grande forma colorida SVG que está sob o corte; essa forma é a segunda camada.

O usuário começaria a rastrear, mas o que ele realmente está fazendo é arrastar esse grande objeto SVG de um ponto para o outro, ele precisa seguir o caminho como rastrear, porque somente se ele fizer isso, ele pode arrastar o objeto pelo buraco. (Ele só pode alcançar o objeto na segunda camada através do buraco)

O objeto SVG que está sendo arrastado tem uma cor diferente da camada superior; portanto, quando o usuário arrasta, ele dá a aparência do caminho preenchido.

Espero que isso ajude você ou, pelo menos, lhe dê algumas idéias. Além disso, você pode animar outro SVG quando o usuário concluir o rastreamento, com animação de arte de linha CSS. Provavelmente tentaria isso quando tiver tempo.

— Federico Sananes
fonte

0

Me deparei com uma situação semelhante em que acabei usando react-native-sketch-canvas

Eu fiz o usuário desenhar na tela e comparei o caminho de saída com um caminho predefinido. Não era uma solução perfeita, mas era suficiente para minhas necessidades.

— Firoz Ahmed
fonte

0

Para reconhecimento, você pode usar o rn-gesto-reconhecedor incorporado no pacote rn-draw: https://www.npmjs.com/package/rn-gesture-recognizer

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

E então você pode, por exemplo, criar sua forma css perfeita sobre o seu svg: https://codedaily.io/tutorials/22/The-Shapes-of-React-Native

Além disso, você pode fazer outras coisas assim: https://codedaily.io/tutorials/55/Create-a-Draggable-Opacity-Changing-Circle-with-Reanimated-in-React-Native

— LG
fonte

0

Geralmente, quando falamos em trabalhar no SVG, a primeira biblioteca que me vem à mente é o D3 Js. No d3, é possível seguir o caminho de qualquer forma no svg e criar interpolação. Um exemplo é indicado abaixo. isso pode ajudá-lo de qualquer maneira.

<!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>

Fonte: http://bl.ocks.org/MattWoelk/6132258

Você pode ajustar a interpolação com qualquer tipo, String, data qualquer coisa. Para interpolação, o link abaixo pode ajudar

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

http://jsfiddle.net/SHF2M/

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

Construa a forma svg externa como duas elipses conectadas por linha em ambos os lados; então, podemos usar o caminho da elipse para interpolar usando as posições de rotação. A posição de rotação deve depender do progresso na tela de confirmação.

— redhatvicky
fonte