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>

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 accountReceived 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
*