Fix bug

rexrainbow · Oct 16, 2023 · 55f5d7b · 55f5d7b
1 parent 3b3c55c
commit 55f5d7b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/examples/circularprogresscanvas/circularprogress.js b/examples/circularprogresscanvas/circularprogress.js
@@ -23,6 +23,10 @@ class Demo extends Phaser.Scene {
             barColor: COLOR_LIGHT,
             centerColor: COLOR_PRIMARY,
 
+            // startAngle: Phaser.Math.DegToRad(270-45),
+            // endAngle: Phaser.Math.DegToRad(270+45),
+            // anticlockwise: true,
+
             // textColor: 0xffffff,
             textStrokeColor: 'red',
             textStrokeThickness: 3,

diff --git a/plugins/gameobjects/canvas/circularprogress/CircularProgress.js b/plugins/gameobjects/canvas/circularprogress/CircularProgress.js
@@ -142,6 +142,7 @@ class CircularProgress extends ProgressBase(Canvas) {
         value = NormalizeAngle(value);
         this.dirty = this.dirty || (this._startAngle != value);
         this._startAngle = value;
+        this._deltaAngle = GetDeltaAngle(this._startAngle, this._endAngle, this._anticlockwise);
     }
 
     setStartAngle(angle) {
@@ -154,12 +155,10 @@ class CircularProgress extends ProgressBase(Canvas) {
     }
 
     set endAngle(value) {
-        if (value < this.startAngle) {
-            value += PI2;
-        }
-
+        value = NormalizeAngle(value);
         this.dirty = this.dirty || (this._endAngle != value);
         this._endAngle = value;
+        this._deltaAngle = GetDeltaAngle(this._startAngle, this._endAngle, this._anticlockwise);
     }
 
     setEndAngle(angle) {
@@ -174,6 +173,7 @@ class CircularProgress extends ProgressBase(Canvas) {
     set anticlockwise(value) {
         this.dirty = this.dirty || (this._anticlockwise != value);
         this._anticlockwise = value;
+        this._deltaAngle = GetDeltaAngle(this._startAngle, this._endAngle, this._anticlockwise);
     }
 
     setAnticlockwise(anticlockwise) {
@@ -316,4 +316,20 @@ class CircularProgress extends ProgressBase(Canvas) {
     }
 }
 
+var GetDeltaAngle = function (startAngle, endAngle, anticlockwise) {
+    if (anticlockwise) {
+        if (startAngle <= endAngle) {
+            return (PI2 + startAngle) - endAngle;
+        } else {
+            return startAngle - endAngle;
+        }
+    } else {
+        if (startAngle >= endAngle) {
+            return (PI2 + endAngle) - startAngle;
+        } else {
+            return endAngle - startAngle;
+        }
+    }
+}
+
 export default CircularProgress;
diff --git a/plugins/gameobjects/canvas/circularprogress/DrawContent.js b/plugins/gameobjects/canvas/circularprogress/DrawContent.js
@@ -14,7 +14,7 @@ var DrawContent = function () {
     var anticlockwise = this.anticlockwise,
         startAngle = this.startAngle,
         endAngle = this.endAngle,
-        deltaAngle = endAngle - startAngle;
+        deltaAngle = this._deltaAngle;
 
     // Draw track
     if (this.trackColor && (lineWidth > 0)) {
@@ -35,8 +35,12 @@ var DrawContent = function () {
 
     // Draw bar
     if ((this.barColor) && (barRadius > 0)) {
-        var barDeltaAngle = deltaAngle * ((anticlockwise) ? (1 - this.value) : this.value);
-        var barEndAngle = barDeltaAngle + startAngle;
+        var barEndAngle;
+        if (anticlockwise) {
+            barEndAngle = (startAngle - (deltaAngle * this.value) + PI2) % PI2;
+        } else {
+            barEndAngle = (startAngle + deltaAngle * this.value) % PI2;
+        }
 
         context.save();