W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2016

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

From: Boris via GitHub <sysbot+gh@w3.org>
Date: Fri, 28 Oct 2016 09:02:47 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-185873049-1477645365-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:04 UTC