Question

我正在尝试使用滑块实现旋转和缩放功能。我需要始终从视口中心旋转的图像。主要思想是在拖动事件后更改舞台的位置和偏移。这就是我尝试过的

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()
  })
}

（（如果您需要完整的源代码clone it from here并从终端运行yarn run dev，则该应用将位于localhost:3000

上）

当图像处于正常位置（尚未缩放和旋转）时，它可以正常工作，但是在进行任何旋转或缩放后，拖动载物台将导致载物台以怪异的方式重新定位（偏移为仍然正确）。如何正确设置位置和偏移量？

Answer 1

下面针对您的第一个问题的解决方案。请注意，我在单个图层上也放置了一个圆圈和一个工具提示，以便能够将它们作为单个图层拖动。另外，应该在Select * from GSI1 where pk=CompX#ProdA之后添加它以进行绑定。

map

Konva-缩放和旋转后更改偏移位置

1 个答案: