From ed4addba4381c8124b46546e22ac544d9373704b Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Thu, 24 Sep 2020 20:24:20 +0900 Subject: fixed circle, stroke width --- src/client/views/GestureOverlay.tsx | 57 ++++++++++--------------------------- src/client/views/InkingStroke.tsx | 6 ++-- 2 files changed, 18 insertions(+), 45 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 6af3a40cf..97dfb7c50 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -695,7 +695,7 @@ export class GestureOverlay extends Touchable { left = this._points[0].X; bottom = this._points[this._points.length - 2].Y; top = this._points[0].Y; - if (shape !== "arrow" && shape !== "line") { + if (shape !== "arrow" && shape !== "line" && shape !== "circle") { if (left > right) { const temp = right; right = left; @@ -754,65 +754,38 @@ export class GestureOverlay extends Touchable { break; case "circle": - // const centerX = (right + left) / 2; - // const centerY = (bottom + top) / 2; - // const radius = bottom - centerY; - - - // for (var y = top; y < bottom; y++) { - // const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX; - // this._points.push({ X: x, Y: y }); - // } - // for (var y = bottom; y > top; y--) { - // const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX; - // const newX = centerX - (x - centerX); - // this._points.push({ X: newX, Y: y }); - // } - // this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top }); - // this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top - 1 }); - - const centerX = (right + left) / 2; - const centerY = (bottom + top) / 2; - if ((bottom - centerY) < (right - centerX)) { - const radius = bottom - centerY; - for (var y = top; y < bottom; y++) { + + const centerX = (Math.max(left, right) + Math.min(left, right)) / 2; + const centerY = (Math.max(top, bottom) + Math.min(top, bottom)) / 2; + const radius = Math.max(centerX - Math.min(left, right), centerY - Math.min(top, bottom)); + if (centerX - Math.min(left, right) < centerY - Math.min(top, bottom)) { + for (var y = Math.min(top, bottom); y < Math.max(top, bottom); y++) { const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX; this._points.push({ X: x, Y: y }); } - for (var y = bottom; y > top; y--) { + for (var y = Math.max(top, bottom); y > Math.min(top, bottom); y--) { const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX; const newX = centerX - (x - centerX); this._points.push({ X: newX, Y: y }); } - this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top }); - this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top - 1 }); + this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(top, bottom) - centerY), 2))) + centerX, Y: Math.min(top, bottom) }); + this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(top, bottom) - centerY), 2))) + centerX, Y: Math.min(top, bottom) - 1 }); + } else { - //right = bottom - //left = top - const radius = right - centerX; - for (var x = left; x < right; x++) { + for (var x = Math.min(left, right); x < Math.max(left, right); x++) { const y = Math.sqrt(Math.pow(radius, 2) - (Math.pow((x - centerX), 2))) + centerY; this._points.push({ X: x, Y: y }); } - for (var x = right; x > left; x--) { + for (var x = Math.max(left, right); x > Math.min(left, right); x--) { const y = Math.sqrt(Math.pow(radius, 2) - (Math.pow((x - centerX), 2))) + centerY; const newY = centerY - (y - centerY); this._points.push({ X: x, Y: newY }); } - this._points.push({ X: left, Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((left - centerX), 2))) + centerY }); - this._points.push({ X: left, Y: (Math.sqrt(Math.pow(radius, 2) - (Math.pow((left - centerX), 2))) + centerY) - 1 }); - + this._points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(left, right) - centerX), 2))) + centerY }); + this._points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - (Math.pow((Math.min(left, right) - centerX), 2))) + centerY - 1 }); } - - - - - - - - break; case "line": if (Math.abs(firstx - lastx) < 20) { diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index da98eca73..d8860a392 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -160,7 +160,7 @@ export class InkingStroke extends ViewBoxBaseComponent - { formatInstance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll" /> ); @@ -189,8 +189,8 @@ export class InkingStroke extends ViewBoxBaseComponent Date: Fri, 25 Sep 2020 00:29:08 +0900 Subject: fixed stroke width on control points --- src/client/views/InkingStroke.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index d8860a392..186406424 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -47,6 +47,7 @@ export class InkingStroke extends ViewBoxBaseComponent { + //TODO:renew points before controlling setupMoveUpEvents(this, e, this.onControlMove, this.onControlup, (e) => { }); this._controlUndo = UndoManager.StartBatch("DocDecs set radius"); this._prevX = e.clientX; @@ -160,20 +161,20 @@ export class InkingStroke extends ViewBoxBaseComponent - { formatInstance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll" /> ); const controls = controlPoints.map((pts, i) => - { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll" /> ); const handles = handlePoints.map((pts, i) => - this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} /> ); const handleLines = handleLine.map((pts, i) => -- cgit v1.2.3-70-g09d2