¿La forma más fácil de trazar una forma con tacto en reaccionar nativo?

8

Estoy tratando de hacer una pantalla de confirmación en mi aplicación nativa Reaccionar y necesito que el usuario rastree una elipse para confirmar su acción, algo así como lo que hace el hotel esta noche con su logotipo. ¿Hay una biblioteca que pueda usar para que el usuario rastree un svg?

Aquí hay un ejemplo de lo que estaría haciendo el usuario:

react-native svg touch looneydoodle
fuente

Respuestas:

3

Encontré a alguien más tratando de hacer esto , no creo que sea el enfoque más creativo, hubo una forma de hacerlo en flash hace muchos años.

Sé que SVG se está utilizando para la animación de arte lineal, hay muchos tutoriales disponibles:

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

Además, hay una biblioteca para SVG llamada react-native-svg , la cosa es que los objetos SVG se pueden arrastrar en javascript

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

Entonces, mi idea para resolver esto sería esta: tienes dos capas una encima de la otra.

El superior llena toda la pantalla y tiene un corte, esa es la forma que se debe rastrear (el dibujo lineal)

Para llegar al objeto SVG que está detrás, solo puede hacerlo a través de este corte. Puede mostrar un círculo pequeño en el punto de inicio que es parte de una gran forma de color SVG que está debajo del corte, esta forma es la segunda capa.

El usuario comenzaría a rastrear, pero lo que realmente está haciendo es arrastrar ese gran objeto SVG de un punto al siguiente, necesita seguir el camino como un rastreo porque solo si lo hace, puede arrastrar el objeto a través del agujero. (Solo puede alcanzar el objeto en la segunda capa a través del agujero)

El objeto SVG que se arrastra tiene un color diferente al de la capa superior, de modo que cuando el usuario arrastra, da la apariencia de que la ruta se está llenando.

Espero que esto te ayude o al menos te dé algunas ideas. Además, puede animar otro SVG cuando el usuario complete el seguimiento, con animación de arte lineal CSS. Probablemente intente esto cuando tenga tiempo.

Federico Sananes
fuente
0

Encontré una situación similar en la que terminé usando react-native-sketch-canvas

Hice que el usuario dibujara en el lienzo y comparé la ruta de salida con una ruta predefinida. No era una solución perfecta, pero era lo suficientemente buena para mis requisitos.

Firoz Ahmed
fuente
0

En general, cuando hablamos de trabajar en SVG, la primera biblioteca que viene a mi mente es la D3 Js, en d3 puede seguir el camino de cualquier forma en la svg y podemos crear interpolación. Un ejemplo de este tipo se indica a continuación. Esto puede ayudarlo de cualquier manera.

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

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

Puede ajustar la interpolación con cualquier tipo, cadena, fecha cualquier cosa. Para la interpolación, el siguiente enlace puede ayudar

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

http://jsfiddle.net/SHF2M/

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

Construya la forma externa de svg como dos elipses conectadas por línea a ambos lados, luego podemos usar la ruta de elipse para interpolar usando posiciones de rotación. La posición de rotación debe depender del progreso en la pantalla de confirmación.

redhatvicky
fuente