#163 startAngle option

pguso · Apr 30, 2020 · 72384b7 · 72384b7
1 parent 58e04f7
commit 72384b7
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 11 deletions.
diff --git a/dist/circliful.js b/dist/circliful.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-plugin-circliful",
-  "version": "2.0.12",
+  "version": "2.0.15",
   "description": "circle statistic plugin without dependencies",
   "main": "dist/circliful.js",
   "repository": {

diff --git a/public/index.html b/public/index.html
@@ -23,6 +23,7 @@
     <div id="circle5" class="circle-default-style"></div>
 
     <div id="circle7" class="circle-default-style"></div>
+    <div id="circle8" class="circle-default-style"></div>
 </div>
 <script type="text/javascript" src="../dist/circliful.js"></script>
 <script>
@@ -117,6 +118,15 @@
         });
 
         console.log('get', circle7.get('percent'));
+
+        circliful.newCircle({
+            percent: 80,
+            id: 'circle8',
+            type: 'simple',
+            foregroundCircleWidth: 10,
+            startAngle: -145,
+            backgroundCircleWidth: 0
+        });
     })();
 </script>
 </body>

diff --git a/src/circle-type/plain-circle.ts b/src/circle-type/plain-circle.ts
@@ -50,20 +50,21 @@ class PlainCircle extends BaseCircle {
      * @description Draws the circle by given percentage with optional animation
      */
     public drawPlainCircle() {
-        const endAngle = 360 / 100 * this.options.percent;
+        const startAngle = this.options.startAngle ? this.options.startAngle : 0;
+        const endAngle = 360 / 100 * this.options.percent + Number(startAngle);
         const customCssClass = ObjectHelper.extractPropertyFromObject(
             this.additionalCssClasses,
             "foregroundCircle",
         );
         const arc = SvgTags.addArc({
             "id": `arc-${this.options.id}`,
             "class": `foreground-circle ${customCssClass}`,
-            "d": SvgTagsHelper.describeArc(this.coordinates.x, this.coordinates.y, this.radius, 0, endAngle),
+            "d": SvgTagsHelper.describeArc(this.coordinates.x, this.coordinates.y, this.radius, startAngle, endAngle),
             "stroke-width": this.options.foregroundCircleWidth,
             "stroke-linecap": this.options.strokeLinecap,
         });
 
-        if (this.options.animation) {
+        if (this.options.animation && !this.options.startAngle) {
             this.animate(arc);
         }
 

diff --git a/src/circle-type/simple-circle.ts b/src/circle-type/simple-circle.ts
@@ -123,15 +123,16 @@ class SimpleCircle extends BaseCircle {
      * @description Draws foreground circle
      */
     public drawForegroundCircle() {
-        const endAngle = 360 / 100 * this.options.percent;
+        const endAngle = (360 / 100 * this.options.percent) + Number(this.options.startAngle);
+        const startAngle = this.options.startAngle ? this.options.startAngle : 0;
         const customCssClass = ObjectHelper.extractPropertyFromObject(
             this.additionalCssClasses,
             "foregroundCircle",
         );
         const attributes: IAttributes = {
             "id": `arc-${this.options.id}`,
             "class": `foreground-circle ${customCssClass}`,
-            "d": SvgTagsHelper.describeArc(this.coordinates.x, this.coordinates.y, this.radius, 0, endAngle),
+            "d": SvgTagsHelper.describeArc(this.coordinates.x, this.coordinates.y, this.radius, startAngle, endAngle),
             "stroke-width": this.options.foregroundCircleWidth,
             "stroke-linecap": this.options.strokeLinecap,
         };
@@ -142,7 +143,7 @@ class SimpleCircle extends BaseCircle {
         }
 
         const arc = SvgTags.addArc(attributes);
-        if (this.options.animation) {
+        if (this.options.animation && !this.options.startAngle) {
             this.animate(arc);
         }
 

diff --git a/src/helper/style-helper.ts b/src/helper/style-helper.ts
@@ -26,8 +26,16 @@ export class StyleHelper {
         let count = 1;
         const interval = setInterval((arc, percent, progressColors) => {
             const endAngle = endAngleGrade / 100 * count;
+            const sweepFlag = startAngle < 0 && endAngle > 286 ? "1" : "0";
             SvgTagsHelper.setAttributes(arc, {
-                d: SvgTagsHelper.describeArc(arcParams.x, arcParams.y, arcParams.radius, startAngle, endAngle),
+                d: SvgTagsHelper.describeArc(
+                    arcParams.x,
+                    arcParams.y,
+                    arcParams.radius,
+                    startAngle,
+                    endAngle,
+                    sweepFlag,
+                ),
             });
 
             if (hasProgressColor) {

diff --git a/src/helper/svg-tags-helper.ts b/src/helper/svg-tags-helper.ts
@@ -55,9 +55,17 @@ class SvgTagsHelper {
      * @param radius
      * @param startAngle
      * @param endAngle
+     * @param sweepFlag
      * @returns string
      */
-    public static describeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number): string {
+    public static describeArc(
+        x: number,
+        y: number,
+        radius: number,
+        startAngle: number,
+        endAngle: number,
+        sweepFlag = "0",
+    ): string {
         const start = SvgTagsHelper.polarToCartesian(x, y, radius, endAngle);
         const end = SvgTagsHelper.polarToCartesian(x, y, radius, startAngle);
         const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
@@ -67,9 +75,10 @@ class SvgTagsHelper {
             closePath = true;
             start.x = start.x - 0.001;
         }
+
         return [
             "M", start.x, start.y,
-            "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y, (closePath ? "Z" : ""),
+            "A", radius, radius, 0, largeArcFlag, sweepFlag, end.x, end.y, (closePath ? "Z" : ""),
         ].join(" ");
     }
 

diff --git a/src/interface/iavailable-options.ts b/src/interface/iavailable-options.ts
@@ -28,6 +28,7 @@ export interface IAvailableOptions {
     backgroundCircleWidth?: number;
     progressColors?: IProgressColor[];
     onAnimationEnd?: () => {};
+    startAngle?: number;
     // tslint:disable-next-line
     [key: string]: any;
 }