import { divide, multiply, floor } from 'mathjs'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { storeToRefs } from 'pinia'
|
|
const dvMainStore = dvMainStoreWithOut()
|
const { canvasStyleData } = storeToRefs(dvMainStore)
|
|
// 角度转弧度
|
// Math.PI = 180 度
|
function angleToRadian(angle) {
|
return (angle * Math.PI) / 180
|
}
|
|
/**
|
* 计算根据圆心旋转后的点的坐标
|
* @param {Object} point 旋转前的点坐标
|
* @param {Object} center 旋转中心
|
* @param {Number} rotate 旋转的角度
|
* @return {Object} 旋转后的坐标
|
* https://www.zhihu.com/question/67425734/answer/252724399 旋转矩阵公式
|
*/
|
export function calculateRotatedPointCoordinate(point, center, rotate) {
|
/**
|
* 旋转公式：
|
* 点a(x, y)
|
* 旋转中心c(x, y)
|
* 旋转后点n(x, y)
|
* 旋转角度θ tan ??
|
* nx = cosθ * (ax - cx) - sinθ * (ay - cy) + cx
|
* ny = sinθ * (ax - cx) + cosθ * (ay - cy) + cy
|
*/
|
|
return {
|
x:
|
(point.x - center.x) * Math.cos(angleToRadian(rotate)) -
|
(point.y - center.y) * Math.sin(angleToRadian(rotate)) +
|
center.x,
|
y:
|
(point.x - center.x) * Math.sin(angleToRadian(rotate)) +
|
(point.y - center.y) * Math.cos(angleToRadian(rotate)) +
|
center.y
|
}
|
}
|
|
/**
|
* 获取旋转后的点坐标（八个点之一）
|
* @param {Object} style 样式
|
* @param {Object} center 组件中心点
|
* @param {String} name 点名称
|
* @return {Object} 旋转后的点坐标
|
*/
|
export function getRotatedPointCoordinate(style, center, name) {
|
let point // point 是未旋转前的坐标
|
switch (name) {
|
case 't':
|
point = {
|
x: style.left + style.width / 2,
|
y: style.top
|
}
|
|
break
|
case 'b':
|
point = {
|
x: style.left + style.width / 2,
|
y: style.top + style.height
|
}
|
|
break
|
case 'l':
|
point = {
|
x: style.left,
|
y: style.top + style.height / 2
|
}
|
|
break
|
case 'r':
|
point = {
|
x: style.left + style.width,
|
y: style.top + style.height / 2
|
}
|
|
break
|
case 'lt':
|
point = {
|
x: style.left,
|
y: style.top
|
}
|
|
break
|
case 'rt':
|
point = {
|
x: style.left + style.width,
|
y: style.top
|
}
|
|
break
|
case 'lb':
|
point = {
|
x: style.left,
|
y: style.top + style.height
|
}
|
|
break
|
default: // rb
|
point = {
|
x: style.left + style.width,
|
y: style.top + style.height
|
}
|
|
break
|
}
|
|
return calculateRotatedPointCoordinate(point, center, style.rotate)
|
}
|
|
// 求两点之间的中点坐标
|
export function getCenterPoint(p1, p2) {
|
return {
|
x: p1.x + (p2.x - p1.x) / 2,
|
y: p1.y + (p2.y - p1.y) / 2
|
}
|
}
|
|
export function sin(rotate) {
|
return Math.abs(Math.sin(angleToRadian(rotate)))
|
}
|
|
export function cos(rotate) {
|
return Math.abs(Math.cos(angleToRadian(rotate)))
|
}
|
|
export function mod360(deg) {
|
return (deg + 360) % 360
|
}
|
|
export function changeStyleWithScale(value, scale = canvasStyleData.value.scale) {
|
return floor(multiply(value, divide(parseInt(scale + ''), 100)))
|
}
|
|
export function toPercent(val) {
|
return val * 100 + '%'
|
}
|
