J'ai une dividved div créée avec le rayon de frontière CSS3 (la partie d'image). J'ai des lignes de texte à côté de celui que j'aimerais aligner 20px ou plus de la courbe, comme si (je ne peux pas poster des images, je ne me souviens pas de l'ancien login):
Le truc est que la courbe change en fonction de la taille de la fenêtre, alors j'aimerais pouvoir calculer les points de la courbe que le texte doit compenser, créant essentiellement une enveloppe de texte vraiment manuelle.
En fin de compte, j'ai besoin de pouvoir calculer et mettre à jour avec JavaScript.
(édité pour ajouter par commentaire ci-dessous): la courbe CSS à des fins de démonstration est frontière-bas-gauche-rayon: 316px 698px; Mais cela est calculé en fonction de la taille de la page par un script. En outre, c'est bon à mentionner, est-ce que je n'ai aucune condition de supporter IE ou Firefox du tout - juste WebKit (application de kiosque autonome).
4 Réponses :
Comme suggéré dans le commentaire de Duri, vous pouvez utiliser l'équation de cercle: http://www.wolframalpha.com/input/?i=%28x -5% 29 ^ 2% 2b% 28Y% 2B4% 29 ^ 2% 3D25 (où le centre est en 5; -4 r = 5)
Cependant, j'utilisais les courbes de Bezier pour dessiner JavaScript. Ils sont très flexibles et consistent ou 2 vecteurs, la courbe faite par eux commence dans le point initial du premier vecteur et fini dans le deuxième vecteur. Plus: http://en.wikipedia.org/wiki/b%C3%A9Zier_Curve (Notez que pour le dessin de la partie du vecteur de cercle sera perpendiculaire)
D'accord, j'ai joué avec elle pendant un moment. C'est un concept précoce; Il est quelque peu inefficace, ne fonctionne pas avec les barres de défilement et jusqu'à présent, cela fonctionne (plus ou moins) uniquement dans Internet Explorer 9 et Firefox 5 (Je n'ai pas testé d'autres versions de ces navigateurs). J'ai sauté que des trucs mathématiques et l'a fait une autre façon - j'utilise document.Elementfrompoint pour savoir où la courbe varie. C'est pourquoi cela ne fonctionne pas dans Chrome - sa mise en œuvre de ElementFrompoint ne respecte pas Border-Rayon (regardez Cet exemple ); C'est pourquoi je devrai probablement remodeler tout le script. Néanmoins, je vous montre ce que j'ai créé parce que cela pourrait être une bonne inspiration pour les autres personnes qui sont prêtes à vous aider. Je vais essayer d'améliorer mon script; Je vous ferai savoir quand je fais des progrès.
Le script peut être trouvé sur http://94.136.148.82 /~DURI/TEDS-CURVE/1.HTML
Très intéressant ... qui peut également être utile pour des objets façonnés au hasard ... Je vais devoir examiner cela un peu plus profondément. Merci pour votre page de démonstration! Et si vous le prenez plus, laissez-moi savoir.
Si vous pouvez utiliser jQuery, j'ai créé un brancard JQuery appelé JCURVY qui vous permettra de positionner des éléments le long d'un bézier courbe.
Vous auriez besoin d'ajuster les paramètres que vous passez dans la fonction de courbe afin de correspondre à la courbe de changement, qui peut être délicate. Combien coûte votre courbe?
Pour déterminer la position d'un point sur un cercle, vous pouvez utiliser la formule:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#wrapper { position: relative; }
#curved {
position: absolute;
left: 200px;
-moz-border-radius-bottomleft: 200px;
-webkit-border-bottom-left-radius: 200px;
border-bottom-left-radius: 200px
border: 1px solid red;
padding: 100px;
background: red;
}
#magiclist { padding-top: 15px; width: 325px; list-style-type: none; }
li { text-align: right; }
</style>
<script>
$(function() {
/* c^2 = a^2 + b^2, c = radius, a = verticalShift, b = horizontalShift */
/* Therefore b = sqrt(c^2 - b^2), so now we can calculate the horizontalShift */
var radius = 200;
var verticalShift = 0;
var horizontalShift = 0;
/* iterate over the list items and calculate the horizontalShift */
$('li').each(function(index, element) {
/* calculate horizontal shift by applying the formula, then set the css of the listitem */
var horizontalShift = Math.sqrt(Math.pow(radius,2) - Math.pow(verticalShift,2));
$(element).css('padding-right', horizontalShift + 'px');
/* need to track how far down we've gone, so add the height of the element as an approximate counter */
verticalShift += $(element).height();
});
});
</script>
</head>
<div id="wrapper">
<div id="curved">test</div>
<ul id="magiclist">
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
</html>
C'est l'une de ces choses que je suppose sera une sorte de délicat :-)
Quel est le code de frontière-rayon?
Avez-vous essayé d'utiliser des formules à partir de la géométrie analytique? Si
[m, n] sont des coordonnées du point pour lequel le rayon est défini etr est le rayon, alors ce qui suit est vrai pour chaque point ([x , Y] ) sur la courbe:(xm) ^ 2 + (yn) ^ 2 = r ^ 2 .lol, non, mais cela peut être exactement ce que je cherche.