How to rotate an image around its center? · Issue #628 · konvajs/react-konva

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

愤怒的警车 · 「震撼」绝不能错过的十大交响乐名曲|贝多芬| ...· 3 周前 ·

豪情万千的风衣 · AddItIn | SOLIDWORKS· 1 月前 ·

从未表白的胡萝卜 · java如何遍历实例类 | PingCode智库· 2 月前 ·

精明的钥匙扣 · 苏州特色小吃-苏州特色小吃促销价格、苏州特色 ...· 2 月前 ·

有爱心的花卷 · Synopsys 文档门户· 3 月前 ·

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

There are two ways.

Offset

Use the offset property to change the origin of the shape to its center. You may need to adjust x and y props to keep the image on the same place

For more info read https://konvajs.org/docs/posts/Position_vs_Offset.html#page-title

Good old math

Use power of math to calculate new x and y when shape is rotated around the center. These functions may help:

export function degToRad(angle) {
  return angle / 180 * Math.PI;
export function getCenter(shape) {
  const angleRad = degToRad(shape.rotation || 0);
  return {
      shape.x +
      shape.width / 2 * Math.cos(angleRad) +
      shape.height / 2 * Math.sin(-angleRad),
      shape.y +
      shape.height / 2 * Math.cos(angleRad) +
      shape.width / 2 * Math.sin(angleRad)
export function rotateAroundPoint(shape, deltaDeg, point) {
  const angleRad = degToRad(deltaDeg);
  const x = Math.round(
    point.x +
      (shape.x - point.x) * Math.cos(angleRad) -
      (shape.y - point.y) * Math.sin(angleRad)
  const y = Math.round(
    point.y +
      (shape.x - point.x) * Math.sin(angleRad) +
      (shape.y - point.y) * Math.cos(angleRad)
  return {
    ...shape,
    rotation: Math.round((shape.rotation + deltaDeg)),
export function rotateAroundCenter(shape, deltaDeg) {
  const center = getCenter(shape);
  return rotateAroundPoint(shape, deltaDeg, center);
// usage
const attrs = {
  x: image.x(),
  y: image.y(),
  width: image.width(),
  height: image.height(),
  rotation: image.rotation();
const rotatedAttrs = rotateAroundCenter(attrs, 45);
image.setAttrs(rotatedAttrs);