Allonger une forme (flèche)

Bonjour,
J'espère réussir à vous expliquer au maximum mon problème

Je suis sur un projet de création d'exercice de BasketBall, il me manque un petit point que j'arrive pas à régler..

J'aimerais rallonger des images exemple une flèche exemple : https://forum.alsacreations.com/upload/1528120340-64060-2018-06-0415h5151.png

Avoir un petit point devant et derrière pour l'allonger.
J'ai essayé de trouvé du jquery mais pas trouvé ...
Vous avez des idées ?

Bonne journée

* Tronçonner l'image en 3 morceaux
* répartir les morceaux dans 3 boites
* répéter autant que besoin le morceau du milieu en le collant en image de fond
* bien juxtaposer les boites à coups de margin:0; et padding: 0;

Ne marche pas si la flèche est brisée ou de travers mais ce n'est pas dans le cahier des charges
Modifié par bazooka07 (04 Jun 2018 - 19:49)

D'accord avec Bazooka, tu dois avoir tes deux éléments clickable aux extrémités et écouter le click pour ensuite récupérer la position et le déplacement de la souris pour pouvoir mettre à jour la valeur de ta boite centrale.

Si tu cherches quelque chose de tout fait, tu vas certainement te retrouver avec une librairie de dingue où tu n'utiliseras pas 0,2% du truc. Essaie de le faire toi même et tu verras que ce n'est pas très compliqué. Tu pourras toujours poster un message avec ton avancement sur les points bloquant .

Juste pour le fun, un petit test avec un resize[/i (même si ça ne correspond à toutes tes attentes et pas une super compatibilité, je trouvais le truc assez drôle).
Modifié par Yordi (05 Jun 2018 - 09:53)

Merci pour vos réponses
Je pense que le faire moi même de A à Z sera un peu compliqué vu la complexité de la chose ...

Je crois que j'ai mal expliqué
J'ai fait une petit vidéo si vous voulez voir un exemple de se que je recherche
http://www.k-upload.fr/afficher-video-2018-06-06-179a898e12018060613h2.mp4.html
Modifié par MickaM (06 Jun 2018 - 13:38)

Dans ta vidéo les flèches ne ressemblent pas beaucoup au modèle initial

Ta vidéo fait plus penser à un dessin animé avec des images au format gif ou png ( pixels transparents )
Vu le déplacement aléatoire des joueurs, le plus simple sera tracer les flèches dans un logiciel de dessin gérant les pixels transparents dans un format gif ou png
Tu as dans le lien ci-dessous une petite animation qui pourrait résoudre ton problème
http://alistapart.com/d/sprites/ala-blobs2.html
C'est plutôt astucieux
il y a une série de <li> par forcément de même taille placées en position: absolute par rapport à leur <ul> et qui ont une image de fond correspondant à chaque animation
Dans ton cas, on peut remplacer le survol de la souris en ajoutant/retranchant une class à chaque <li>
Si on souhaite n'afficher qu'une flèche à la fois quelque soit l'avancement du match, remplacer les <li> par des boutons radios.
Après, je pense à d'autres solutions plus compliquées
Le problème c'est les joueurs ne courrent pas droits.

En fait l'objectif n'est pas d'avoir une animation mais de construire pas a pas un exercice, la vidéo montre juste comment je veux placer la flèche avec la souris

Une autre solution est d'employer une librairie javascript capable de gérer l'animation d'un gif:
https://github.com/buzzfeed/libgif-js
Ce serait plus simple d'emploi mais je ne suis pas sur que cela soit aussi fiable.

MickaM a écrit :
En fait l'objectif n'est pas d'avoir une animation mais de construire pas a pas un exercice, la vidéo montre juste comment je veux placer la flèche avec la souris

C'est une animation où on contrôle l'avancement pas à pas
Donne moi un lien vers une image de terrain de basket, stp

Je sais pas si j'ai bien expliqué ^^
Voila un terrain exemple :
http://combien.io/wp-content/uploads/2016/12/plan-terrain-basket-ball.png

Démo, cliquer sur les joueurs pour afficher les joueurs :
https://kazimentou.fr/divers/basket/

Tu as mal compris je crois, ou alors j'ai mal expliqué ^^
Je suis en train de créer un site pour créer son exercice de basket, se que je cherche la se n'est pas une amination, mais un "dessin" d'une flèche comme sur la vidéo ci-dessus.
Je cherche en ce moment une librairie du genre snap.svg, mais je pense qu'il y a un du dev à faire dessus...

C'est pas clair
Si c'est pour dessiner une flèche en direct live, et courbe, on peut le faire avec du SVG avec des courbes de Bézier dans un fragment de SVG inséré dans une page HTML.
Le problème c'est de gérer l'interaction entre la souris et la flèche.
Et là la courbe d'acquisition pour arriver au but est très raide.
Le plus simple étant Skype et un tableau blanc, ou Teamviewer.

Bon courage

Si tu veux "dessiner" (plus simple que de dire "allonger une fleche image blabla lol) avec la souris, c'est du coté de paper.JS

voici un exemple : http://paperjs.org/examples/path-simplification/

Tu as toute la source ici :

var path;

var textItem = new PointText({
	content: 'Click and drag to draw a line.',
	point: new Point(20, 30),
	fillColor: 'black',
});

function onMouseDown(event) {
	// If we produced a path before, deselect it:
	if (path) {
		path.selected = false;
	}

	// Create a new path and set its stroke color to black:
	path = new Path({
		segments: [event.point],
		strokeColor: 'black',
		// Select the path, so we can see its segment points:
		fullySelected: true
	});
}

// While the user drags the mouse, points are added to the path
// at the position of the mouse:
function onMouseDrag(event) {
	path.add(event.point);

	// Update the content of the text item to show how many
	// segments it has:
	textItem.content = 'Segment count: ' + path.segments.length;
}

// When the mouse is released, we simplify the path:
function onMouseUp(event) {
	var segmentCount = path.segments.length;

	// When the mouse is released, simplify it:
	path.simplify(10);

	// Select the path, so we can see its segments:
	path.fullySelected = true;

	var newSegmentCount = path.segments.length;
	var difference = segmentCount - newSegmentCount;
	var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
	textItem.content = difference + ' of the ' + segmentCount + ' segments were removed. Saving ' + percentage + '%';
}

Modifié par JENCAL (06 Jun 2018 - 17:25)

JENCAL a écrit :
Si tu veux "dessiner" (plus simple que de dire "allonger une fleche image blabla lol) avec la souris, c'est du coté de paper.JS

voici un exemple : http://paperjs.org/examples/path-simplification/

Tu as toute la source ici :

var path;

var textItem = new PointText({
	content: 'Click and drag to draw a line.',
	point: new Point(20, 30),
	fillColor: 'black',
});

function onMouseDown(event) {
	// If we produced a path before, deselect it:
	if (path) {
		path.selected = false;
	}

	// Create a new path and set its stroke color to black:
	path = new Path({
		segments: [event.point],
		strokeColor: 'black',
		// Select the path, so we can see its segment points:
		fullySelected: true
	});
}

// While the user drags the mouse, points are added to the path
// at the position of the mouse:
function onMouseDrag(event) {
	path.add(event.point);

	// Update the content of the text item to show how many
	// segments it has:
	textItem.content = 'Segment count: ' + path.segments.length;
}

// When the mouse is released, we simplify the path:
function onMouseUp(event) {
	var segmentCount = path.segments.length;

	// When the mouse is released, simplify it:
	path.simplify(10);

	// Select the path, so we can see its segments:
	path.fullySelected = true;

	var newSegmentCount = path.segments.length;
	var difference = segmentCount - newSegmentCount;
	var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
	textItem.content = difference + ' of the ' + segmentCount + ' segments were removed. Saving ' + percentage + '%';
}

C'est exactement ça que je cherche ...
Je vais explorer cette piste !
Merci beaucoup

Il me reste un petit problème
Je veux faire ça sur une image, j'ai essayé ça mais ça ne marche pas sur l'image (elle apparaît pas)
PS : j'ai supprimer quelques fonctions sur le script, mais ça fonctionne quand j'enlève l'image.

<div class="col-lg-8 col-md-4 col-sm-6">
<canvas resize="true" id="canvas-1" style="-webkit-user-drag: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="1456" height="919" data-paper-scope="1">
<img src="images/terrain2.svg" style="height: 630px;padding-top: 60px;padding-bottom: 30px;"/>
</canvas>
</div>

<script type="text/paperscript" canvas="canvas-1">

var path;

var textItem = new PointText({
	point: new Point(20, 30),
	fillColor: 'black',
});

function onMouseDown(event) {
	// If we produced a path before, deselect it:
	if (path) {
		path.selected = false;
	}

	// Create a new path and set its stroke color to black:
	path = new Path({
		segments: [event.point],
		strokeColor: 'black',
		// Select the path, so we can see its segment points:
		fullySelected: true
	});
}

// While the user drags the mouse, points are added to the path
// at the position of the mouse:
function onMouseDrag(event) {
	path.add(event.point);

}

// When the mouse is released, we simplify the path:
function onMouseUp(event) {
	var segmentCount = path.segments.length;

	// When the mouse is released, simplify it:
	path.simplify(10);

	// Select the path, so we can see its segments:
	path.fullySelected = true;

	var newSegmentCount = path.segments.length;
	var difference = segmentCount - newSegmentCount;
	var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
}


</script>

Modifié par MickaM (07 Jun 2018 - 09:45)

j'arrive pas à reproduire le canvas sur codepen... essaye de le mettre ne ligne ton exemple (codepen/jsffidle, il existe plusieurs plateforme)

J'ai pas trop réussi non plus ..
https://codepen.io/mickaelsch/pen/RJGxwb
Quand j'enlève le canvas l'image apparaît bien
Modifié par MickaM (07 Jun 2018 - 10:20)

J'ai peut-être trouvé une solution, peut-être pas la meilleur mais elle marche :

<canvas resize="true" id="canvas-terrain" style="height: 630px;background: url(https://basketball-practice.fr/images/terrain2.svg);background-repeat: no-repeat;">

J'arrive bien a dessiner sur l'image maintenant.
Me reste plus qu'a trouvé le moyen de modifier ou de déplacer le dessin