From dbd25cf81d458dc371c95f6ea36319a7a422fa05 Mon Sep 17 00:00:00 2001 From: Juan Martin Date: Thu, 18 May 2023 12:08:09 -0300 Subject: [PATCH] fix bug arc shape and arc angle --- examples/arcgrid.html | 21 ++++++++++++++++++--- src/_radial-grid.scss | 6 ++++-- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/examples/arcgrid.html b/examples/arcgrid.html index 1de06da..2607061 100644 --- a/examples/arcgrid.html +++ b/examples/arcgrid.html @@ -15,9 +15,9 @@
-
+
-
+
@@ -40,8 +40,23 @@
-
hola kjh kjh kjh k kjh kjh kjh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss index baa8d68..30c53fa 100644 --- a/src/_radial-grid.scss +++ b/src/_radial-grid.scss @@ -66,7 +66,8 @@ @each $arc, $value in $arcs { .items-#{$i}.#{$arc}>.arc { - --angle: calc((var(--arc) / #{$i - 1}) * var(--direction)); + // No hay que restar un angulo debido a la forma del arco + --angle: calc((var(--arc) / #{$i}) * var(--direction)); } } } @@ -120,7 +121,8 @@ --length: calc(var(--radius-#{$i})*2); --half: calc(var(--length)/2); --quarter: calc(var(--half)/2); - transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(var(--quarter), 0); + // ademas del offset el angulo debe dividirse por 2, distinto de item + transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - (var(--angle)/2)) * 1deg)) translate(var(--quarter), 0); --semi: calc(var(--angle) / 2 * 1deg); --arc-gap: 1px; --length-percent: calc(var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi)));