HTML ligne dessin sans toile (juste JS)
Je suis en train d'utiliser de l'HTML et de tracer une ligne sur une page.
De tout ce que j'ai lu suggère HTML5 canvas tag est le meilleur à utiliser, mais j'ai besoin de la ligne pour se connecter à quelque chose sur la page, ce qui n'est pas dans une balise canvas, si la toile n'est pas bon pour moi (si vous voulez/besoin d'utiliser JS natif).
J'ai écrit (à partir de quelque chose que j'ai trouvé) une fonction qui fait ce que j'ai besoin mais le problème est qu'une fois la ligne s'affiche, tout le reste de la page disparaît.
J'ai trouvé que chaque fois que je changer de style en JavaScript tout, mais la forme disparaît.
La suppression de "du document.écrire" se termine avec rien en voie de disparition.
function draw(ax, ay, bx, by) {
var n, widthLine, i, x, y;
widthLine = 1;
if (Math.abs(ax - bx) > Math.abs(ay - by)) {
if (ax > bx) {
n = ax;
ax = bx;
bx = n;
n = ay;
ay = by;
by = n;
}
n = (by - ay) / (bx - ax);
for (i = ax; i <= bx; i++) {
x = i;
y = Math.round(ay + m * (x - ax));
document.write("<div style='height:" + lineWidth + "px;width:" + widthLine + "px;background-color:black;position:absolute;top:" + y + "px;left:" + x + "px;'></div>");
}
} else {
if (ay > by) {
n = ax;
ax = bx;
bx = n;
n = ay;
ay = by;
by = n;
}
n = (bx - ax) / (by - ay);
for (i = ay; i <= by; i++) {
y = i;
x = Math.round(ax + n * (y - ay));
document.write("<div style='height:" + lineWidth + "px;width:" + lineWidth + "px;background-color:black;position:absolute;top:" + y + "px;left:" + x + "px;'></div>");
}
}
}
OriginalL'auteur Craig Shipman | 2013-01-28
Vous devez vous connecter pour publier un commentaire.
Une solution rapide.
Ci-dessous la fonction obtient les coordonnées de la ligne, puis il dessine.
Il fonctionne à l'aide d'un long et mince élément div. L'angle de rotation et la longueur sont calculés.
Devrait fonctionner sur tous les navigateurs (je l'espère même IE).
l'appel de votre méthode deux fois entraînera deux divs ayant le même id
a fonctionné pour moi, merci
Un seul problème avec ceci est que si vous essayez de créer une ligne de départ en bas à gauche à en haut à droite, il va générer de manière incorrecte. Oui, je voudrais changer l'id de classe. Si vous avez besoin d'une pièce d'identité ainsi, vous pouvez facilement lui donner une dynamique id lors de l'exécution généré par un timestamp ou quoi que ce soit autre chose que vous voulez identifier. Id doit être unique.
Taub: Il ne fonctionne pas correctement. La ligne est un point de fin de la ligne est tracée beaucoup au-dessus de la position actuelle de la souris. Pouvez-vous montrer un travail de violon pour cela? Aussi pouvez-vous expliquer un peu comment vous atteindre cet objectif?
OriginalL'auteur
Ce javascript bibliothèque graphique semble très adapté pour ce que vous voulez atteindre.
OriginalL'auteur
Cette réponse sur un autre dépassement de la pile de la page fonctionne bien. Je dessinais sur une image. Il me faut mettre l'image dans un DIV avec un ID qui a été utilisée plus tard dans le script dans la getElementById (). Ensuite, il fonctionne très bien. L'autre réponse sur la page (Craig Taub) ne fonctionne pas. Je dis cela car il m'a coûté du temps pour réaliser que c'était rien de ce que je faisais mal. Il utilise le même principe de l'élaboration d'un mince div qui est en rotation. Je sais que ça fonctionne dans chrome.
Tracer des lignes sur la page html
OriginalL'auteur