How to calculate points on a curve that matches CSS3 created border radius? Geometry geniuses?
I have a curved div created with css3 border radius (the image part). I have text lines next to it that I would like to align 20px or so off the curve, like so (cant post images, cant remember old login):
The trick is the curve changes depending on the window size, so I'd like to be able to calculate the points on the curve that the text should offset from, essentially creating a really manual text-wrap.
Ultimately I need to be able to calculate and update with javascript.
(edited to add per comment below): The curve css for purposes of demonstration is border-bottom-left-radius: 316px 698px; but that is calculated based on page size by a script. Also, good to mention, is I have no requirement to support IE or FireFox at all--just webkit (standalone kiosk a开发者_如何学Cpplication).
As suggested in comment by duri, you can use circle equation: http://www.wolframalpha.com/input/?i=%28x-5%29^2%2B%28y%2B4%29^2%3D25 (where center is in 5;-4 r=5)
However, I was using Bezier's Curves for drawing in Javascript. They are very flexible and consist or 2 vectors, the curve made by them starts in first vector's initial point and finish in second vector's. More: http://en.wikipedia.org/wiki/B%C3%A9zier_curve (Notice that for drawing part of the circle vector will be perpendicular)
Okay, I've played with it for a while. This is an early concept; it is somewhat inefficient, doesn't work with scrollbars and so far it works (more or less) only in Internet Explorer 9 and Firefox 5 (I didn't test other versions of these browsers). I skipped that mathematical stuff and did it another way - I use document.elementFromPoint to find out where the curve ranges. This is why it doesn't work in Chrome - its implementation of elementFromPoint doesn't respect border-radius (look at this example); hence I'll probably have to remodel the whole script. Nevertheless I show you what I created because it could be a good inspiration for another people who are willing to help you. I'll try to improve my script; I'll let you know when I make some progress.
The script can be found at http://94.136.148.82/~duri/teds-curve/1.html
To work out the position of a point along a circle you can use the formula:
c^2 = a^2 + b^2
where c = radius, a is verticle distance from center, b is horizontal distance from center.
So knowing this, I constructed a very contrived example for you to review. Please note there are a couple of things to help increase performance such as caching the radius squared but I left it out to avoid complicating the demo.
<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>
If you can use jQuery I have created a jQuery pluging called jCurvy that will allow you to position elements along a bezier curve.
You would need to adjust the parameters that you are passing into the curve function in order to match the changing curve, which may be tricky. How much is your curve changing?
加载中,请稍侯......
精彩评论