[csswg-drafts] [css-shapes] A proposal of the definition of the distance between two shape functions

BorisChiou has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-shapes] A proposal of the definition of the distance between 
two shape functions ==
https://w3c.github.io/web-animations/#paced-keyframe-spacing-mode

https://drafts.csswg.org/css-shapes/#basic-shape-interpolation

In web-animations (@birtles), we need to calculate the distance 
between two shape functions for paced spacing. Unfortunately, we don't
 have a definition of the distance between two shape functions in 
[css-shapes], so I propose some ideas about it (which is very similar 
with interpolation):

1. Both shapes must use the same reference box.
2. If both shapes are the same type, that type is ellipse() or 
circle(), and none of the radii use the closest-side or farthest-side 
keywords, subtract each value in the shape functions and get the 
square root of the sum of these difference values. (Kind of Euclidean 
distance, I think)
3. If both shapes are of type inset(), subtract each value in the 
shape functions and get the square root of the sum of these difference
 values.
4. If both shapes are of type polygon(), both polygons have the same 
number of vertices, and use the same fill-rule, subtract each value in
 the shape functions and get the square root of the sum of these 
difference values.
5. In all other cases, there is no distance, so we return 0.

e.g.
`shape1:  { clipPath: "circle(calc(10px + 10px) at 20px 10px)" }`
`shape2:  { clipPath: "circle(calc(20px + 30px) at 10px 50%)" }`
- Step 1: The difference shape function: `circle(calc(30px) at -10px 
calc(50% - 10px))`
- Step 2: The distance is: `sqrt(30 * 30 + (-10) * (-10) + 0.5 * 0.5 +
 (-10) * (-10))`
- P.S. We use computed values, so 50% is 0.5 in this example.


Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/662 using your GitHub 
account

Received on Friday, 28 October 2016 09:02:53 UTC