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

link管理

链接快照平台

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

相关文章推荐

痴情的青椒 · Clipboard: read() method· 3 周前 ·

挂过科的企鹅 · 恒大超千亿境外债重组方案终出炉：前3年不付息 ...· 1 月前 ·

幸福的草稿本 · 两种列式存储格式：Parquet和ORC-腾 ...· 1 年前 ·

迷茫的枕头 · C++通过文件指针获取文件大小的方法实现_C ...· 1 年前 ·

行走的猴子 · 激活恋爱辅助器，一天搞定美女校花！{1} ...· 1 年前 ·

腾讯云

开发者社区

文档意见反馈控制台

首页 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用户