lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 04:42:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
tbo47 2025-04-11 14:38:08 +00:00
parent 9f943d6984
commit 98f5949b72
1 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/shapes/Cloud.ts
View File

@ -1,17 +1,17 @@
import { Path, PathConfig } from "./Path" import { Path, PathConfig } from './Path';
const CLOUD = { const CLOUD = {
topPath: `a 8 8 0 0 1 14 5`, topPath: `a 8 8 0 0 1 14 5`,
topOffset: `m -2 -5`, topOffset: `m -2 -5`,
topWidth: 12, topWidth: 12,
rightPath: `a 8 8 0 0 1 -5 14`, rightPath: `a 8 8 0 0 1 -5 14`,
rightOffset: `m 5 -2`, rightOffset: `m 5 -2`,
bottomPath: `a 8 8 0 0 1 -14 -5`, bottomPath: `a 8 8 0 0 1 -14 -5`,
bottomOffset: `m 2 5`, bottomOffset: `m 2 5`,
leftPath: `a 8 8 0 0 1 5 -14`, leftPath: `a 8 8 0 0 1 5 -14`,
leftOffset: `m -5 2`, leftOffset: `m -5 2`,
leftHeight: 12, leftHeight: 12,
} };
/** /**
* Cloud shape * Cloud shape
@ -37,33 +37,33 @@ const CLOUD = {
* ``` * ```
*/ */
export class Cloud extends Path { export class Cloud extends Path {
constructor(config: PathConfig) { constructor(config: PathConfig) {
super(config) super(config);
this.adjustPath(config.width || 0, config.height || 0) this.adjustPath(config.width || 0, config.height || 0);
this.on('transformend', (e) => { this.on('transformend', (e) => {
const { width, height } = this.getClientRect() const { width, height } = this.getClientRect();
const a = Math.abs(e.target.rotation()) const a = Math.abs(e.target.rotation());
const sinA = Math.sin((a * Math.PI) / 180) const sinA = Math.sin((a * Math.PI) / 180);
const cosA = Math.cos((a * Math.PI) / 180) const cosA = Math.cos((a * Math.PI) / 180);
const h = (width * sinA - height * cosA) / (sinA ** 2 - cosA ** 2) const h = (width * sinA - height * cosA) / (sinA ** 2 - cosA ** 2);
const w = (width * cosA - height * sinA) / (cosA ** 2 - sinA ** 2) const w = (width * cosA - height * sinA) / (cosA ** 2 - sinA ** 2);
this.adjustPath(w, h) this.adjustPath(w, h);
this.width(width) this.width(width);
this.height(height) this.height(height);
this.scaleX(1) this.scaleX(1);
this.scaleY(1) this.scaleY(1);
}) });
} }
adjustPath(width: number, height: number) { adjustPath(width: number, height: number) {
const topPathCounter = Math.floor(Math.abs(width) / CLOUD.topWidth) const topPathCounter = Math.floor(Math.abs(width) / CLOUD.topWidth);
const leftPathCounter = Math.floor(Math.abs(height) / CLOUD.leftHeight) const leftPathCounter = Math.floor(Math.abs(height) / CLOUD.leftHeight);
const path = const path =
`${CLOUD.topPath} ${CLOUD.topOffset} `.repeat(topPathCounter) + `${CLOUD.topPath} ${CLOUD.topOffset} `.repeat(topPathCounter) +
`${CLOUD.rightPath} ${CLOUD.rightOffset} `.repeat(leftPathCounter) + `${CLOUD.rightPath} ${CLOUD.rightOffset} `.repeat(leftPathCounter) +
`${CLOUD.bottomPath} ${CLOUD.bottomOffset} `.repeat(topPathCounter) + `${CLOUD.bottomPath} ${CLOUD.bottomOffset} `.repeat(topPathCounter) +
`${CLOUD.leftPath} ${CLOUD.leftOffset} `.repeat(leftPathCounter) `${CLOUD.leftPath} ${CLOUD.leftOffset} `.repeat(leftPathCounter);
this.setAttr('data', path) this.setAttr('data', path);
} }
} }