banana-site-service/test.js

function rotatePoint(point, deg, clockwise) {
  const [x, y] = point
  // 将角度转换为弧度，针旋转
  let rad = (deg / 360) * 2 * Math.PI
  if (clockwise) {
    rad = -rad
  }

  // 计算旋转后的坐标
  const xPrime = x * Math.cos(rad) - y * Math.sin(rad)
  const yPrime = x * Math.sin(rad) + y * Math.cos(rad)

  return [xPrime, yPrime]
}

function movePoint(point, dPoint) {
  const [x, y] = point
  const [dx, dy] = dPoint
  // 计算新的坐标
  const xPrime = x + dx
  const yPrime = y + dy

  return [xPrime, yPrime]
}

function rotatePointByOrigin(point, originPoint, deg, clockwise) {
  const [x, y] = point
  const [xOrigin, yOrigin] = originPoint

  const pPrime = movePoint(rotatePoint(movePoint([x, y], [-xOrigin, -yOrigin]), deg, clockwise), [xOrigin, yOrigin])
  return pPrime
}

function getBoxBorderPointsCanvasCoordinate(x, y, width, height, rotation, clockwise) {
  const tl = [x, y]
  const tr = movePoint(tl, [width, 0])
  const br = movePoint(tl, [width, -height]);
  const bl = movePoint(tl, [0, -height]);

  // 旋转矩形
  const tlPrime = rotatePointByOrigin(tl, tl, rotation, clockwise)
  const trPrime = rotatePointByOrigin(tr, tl, rotation, clockwise)
  const brPrime = rotatePointByOrigin(br, tl, rotation, clockwise)
  const blPrime = rotatePointByOrigin(bl, tl, rotation, clockwise)

  return [tlPrime, trPrime, brPrime, blPrime]
}

function getCenterOfBox(box) {
  const [topLeft, topRight, bottomRight, bottomLeft] = box
  const centerX = (topLeft[0] + bottomRight[0]) / 2
  const centerY = (topLeft[1] + bottomRight[1]) / 2

  return [centerX, centerY]
}

function rotateBox(box, deg, clockwise) {
  const center = getCenterOfBox(box)

  const [tl, tr, br, bl] = box

  const tlPrime = rotatePointByOrigin(tl, center, deg, clockwise)
  const trPrime = rotatePointByOrigin(tr, center, deg, clockwise)
  const brPrime = rotatePointByOrigin(br, center, deg, clockwise)
  const blPrime = rotatePointByOrigin(bl, center, deg, clockwise)

  return [tlPrime, trPrime, brPrime, blPrime]
}

function proportionToAbsolute(point, canvas) {
  const [x, y] = point
  const [canvasWidth, canvasHeight] = canvas

  return [x * canvasWidth / 100, y * canvasHeight / 100]
}

function absoluteToProportion(point, canvas) {
  const [x, y] = point
  const [canvasWidth, canvasHeight] = canvas

  return [x / canvasWidth * 100, y / canvasHeight * 100]
}

// const rotatedBox = rotateBox(box, -53.86516686148042, true)
// console.log(rotatedBox)

// const originBox = getBoxBorderPointsCanvasCoordinate(6.038732394366197, -18.489583333333336, 72.46478873239437, 22.656249999999993, 0 ,true)
// console.log(originBox)

const canvas = [710, 1029]

function example(options) {
  const { x, y, rotation, clockwise } = options
  const pointAbsolute = proportionToAbsolute([x, y], canvas)
  const [width, height] = proportionToAbsolute([options.width, options.height], canvas)

  console.log('Absolute position:', pointAbsolute)
  console.log('Absolute size:', [width, height])


  const box = getBoxBorderPointsCanvasCoordinate(pointAbsolute[0], pointAbsolute[1], width, height, rotation, clockwise)
  console.log('Box border points:', box)
  console.log('Box border points in proportion:', box.map(p => absoluteToProportion(p, canvas)))

  const rotatedBox = rotateBox(box, -rotation, clockwise)

  console.log('Origin box:', rotatedBox)
  console.log('Origin box in proportion:', rotatedBox.map(p => absoluteToProportion(p, canvas)))
}


example({
  x: 34.4261492111812,
  y: -2.974398908479869,
  width: 71.89865757042229,
  height: 22.65625000000022,
  rotation: 53.86516686148042,
  clockwise: true,
})