This commit is contained in:
tbo47 2025-04-11 14:38:08 +00:00
parent 9f943d6984
commit 98f5949b72

View File

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