diff --git a/packages/core/example/lib/data.js b/packages/core/example/lib/data.js index 8e28fcb..a2046f1 100644 --- a/packages/core/example/lib/data.js +++ b/packages/core/example/lib/data.js @@ -34,9 +34,9 @@ const data = { x: 160, y: 160, w: 200, - h: 120, + h: 20, type: 'rect', - // angle: 60, + angle: 80, desc: { color: '#c0c0c0', } diff --git a/packages/core/src/lib/draw.ts b/packages/core/src/lib/draw.ts index 5300646..eb1705f 100644 --- a/packages/core/src/lib/draw.ts +++ b/packages/core/src/lib/draw.ts @@ -38,12 +38,12 @@ function drawRect(ctx: TypeContext, ele: TypeEleme const desc = ele.desc as TypeElemDesc['rect']; const angle = translateRotateAngle(ele.angle); - const p = translateRotateCenter(ele); + const center = translateRotateCenter(ele); if (angle > 0 || angle < 0) { - ctx.translate(p.x, p.y); + ctx.translate(center.x, center.y); ctx.rotate(angle); - ctx.translate(0 - p.x, 0 - p.y); + ctx.translate(0 - center.x, 0 - center.y); } ctx.setFillStyle(desc.color); @@ -51,9 +51,9 @@ function drawRect(ctx: TypeContext, ele: TypeEleme // reset rotate if (angle > 0 || angle < 0) { - ctx.translate(p.x, p.y); + ctx.translate(center.x, center.y); ctx.rotate(0 - angle); - ctx.translate(0 - p.x, 0 - p.y); + ctx.translate(0 - center.x, 0 - center.y); } } diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index b1fc8d2..ae53214 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -7,7 +7,7 @@ import { // TypeElemDesc, } from '@idraw/types'; import util from './../util'; -// import { translateRotateAngle, translateRotateCenter } from './calculate'; +import { translateRotateAngle, translateRotateCenter } from './calculate'; const { createUUID } = util.uuid; @@ -33,21 +33,21 @@ export class Element { let uuid = null for (let i = data.elements.length - 1; i >= 0; i--) { const ele = data.elements[i]; - // const angle = translateRotateAngle(ele.angle); - // const p = translateRotateCenter(ele); + const angle = translateRotateAngle(ele.angle); + const center = translateRotateCenter(ele); - // if (angle > 0 || angle < 0) { - // ctx.translate(p.x, p.y); - // ctx.rotate(angle); - // ctx.translate(0 - p.x, 0 - p.y); - // } + if (angle > 0 || angle < 0) { + ctx.translate(center.x, center.y); + ctx.rotate(angle); + ctx.translate(0 - center.x, 0 - center.y); + } ctx.beginPath(); - // ctx.moveTo(ele.x, ele.y); - // ctx.lineTo(ele.x + ele.w, ele.y); - // ctx.lineTo(ele.x + ele.w, ele.y + ele.h); - // ctx.lineTo(ele.x, ele.y + ele.h); - // ctx.lineTo(ele.x, ele.y); + ctx.moveTo(ele.x, ele.y); + ctx.lineTo(ele.x + ele.w, ele.y); + ctx.lineTo(ele.x + ele.w, ele.y + ele.h); + ctx.lineTo(ele.x, ele.y + ele.h); + ctx.lineTo(ele.x, ele.y); ctx.rect(ele.x, ele.y, ele.w, ele.h); ctx.closePath(); @@ -56,12 +56,12 @@ export class Element { uuid = ele.uuid; } - // // reset rotate - // if (angle > 0 || angle < 0) { - // ctx.translate(p.x, p.y); - // ctx.rotate(0 - angle); - // ctx.translate(0 - p.x, 0 - p.y); - // } + // reset rotate + if (angle > 0 || angle < 0) { + ctx.translate(center.x, center.y); + ctx.rotate(0 - angle); + ctx.translate(0 - center.x, 0 - center.y); + } if (idx >= 0) { break; diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index 47a1a5f..70d001f 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -145,7 +145,7 @@ export class Helper implements TypeHelper { }, left: { x: elem.x - dotSize, - y: elem.y + elem.h / 2 - dotSize / 2, + y: elem.y + elem.h / 2, }, };