Styjun

I'm trying to implement a rotation and zoom feature with a slider. I need an image to always rotate from the center of the viewport. The main idea is changing the position and offset of the stage after drag event. Here's what I've tried

const width = window.innerWidth
const height = window.innerHeight

// scale is temp
let stage = new Konva.Stage(
 container: 'canvas',
 width,
 height,
 draggable: true,
 offset: 
 x: width / 2,
 y: height / 2
 ,
 x: width / 2,
 y: height / 2
)

let mapLayer = new Konva.Layer()
let imageObj = new Image()

imageObj.onload = function () 
 let map = new Konva.Image(
 image: imageObj,
 prevX: 0,
 prevY: 0
 )

 layer.add(map)
 stage.add(mapLayer)

 stage.on('dragstart', () => 
 map.prevX = map.getAbsolutePosition().x
 map.prevY = map.getAbsolutePosition().y
 )

 stage.on('dragend', () => 
 let curX = map.getAbsolutePosition().x
 let curY = map.getAbsolutePosition().y
 let deltaX = Math.abs(map.prevX - curX)
 let deltaY = Math.abs(map.prevY - curY)

 if (curX > map.prevX) 
 stage.offsetX(stage.offsetX() - deltaX)
 stage.x(stage.x() - deltaX)
 else 
 stage.offsetX(stage.offsetX() + deltaX)
 stage.x(stage.x() + deltaX)
 

 if (curY > map.prevY) 
 stage.offsetY(stage.offsetY() - deltaY)
 stage.y(stage.y() - deltaY)
 else 
 stage.offsetY(stage.offsetY() + deltaY)
 stage.y(stage.y() + deltaY)
 

 stage.draw()
 )

(if you want a full source code, clone it from here and run yarn run dev from terminal, the app lives on localhost:3000

It works fine when the image is in the normal position (not zoomed and rotated yet) but after ANY kind of rotation or zooming, dragging the stage will cause the stage to be re-positioned in a weird fashion (the offset is still correct though). How can I set position and offset correctly?

The solution to your initial issue below.
Note that I put a circle and a tooltip as well to a single layer to be able to drag them as a single one. Also, it should be added after map to have binding work.

import Konva from 'konva'
import map from './../resources/unpar.svg'

const width = window.innerWidth
const height = window.innerHeight

// scale is temp
let stage = new Konva.Stage(
 container: 'canvas',
 width,
 height,
 offset: 
 x: width / 2,
 y: height / 2
 ,
 x: width / 2,
 y: height / 2
)

let layer = new Konva.Layer(draggable: true)

let testCircle = new Konva.Circle(
 x: 633,
 y: 590,
 radius: 10,
 fill: 'white',
 stroke: 'black'
)

testCircle.on('mousemove', function () 
 tooltip.position(
 x: testCircle.x() - 90,
 y: testCircle.y() - 50
 )
 tooltip.text('Pintu Depan Gedung 10')
 tooltip.show()
 layer.batchDraw()
)

testCircle.on('mouseout', function () 
 tooltip.hide()
 layer.draw()
)

var tooltip = new Konva.Text(
 text: '',
 fontFamily: 'Calibri',
 fontSize: 18,
 padding: 5,
 textFill: 'white',
 fill: 'black',
 alpha: 0.75,
 visible: false
)

let imageObj = new Image()

imageObj.onload = function () 
 const map = new Konva.Image(
 image: imageObj,
 )

 layer.add(map)
 layer.add(testCircle)
 layer.add(tooltip)
 stage.add(layer)


imageObj.src = map

export default stage