Konva -缩放和旋转后更改偏移位置开发者社区

link之家

链接快照平台

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

相关文章推荐

私奔的登山鞋 · 你好奇过 MySQL ...· 1 年前 ·

酒量大的芹菜 · Swift - ...· 1 年前 ·

长情的弓箭 · ModularNotFoundError: ...· 1 年前 ·

心软的马克杯 · 新型冠状病毒肺炎（COVID-19）患者出凝 ...· 2 年前 ·

腼腆的香槟 · 加快FileZilla FTP 文件传输 - 简书· 2 年前 ·

腾讯云

开发者社区

文档意见反馈控制台

首页 TVP

文章/答案/技术大牛

发布

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

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)

回答 1

Stack Overflow用户