HTML5 Canvas 拖拽一条线

要使用 Konva 拖拽一条线，我们可以在实例化线条时将配置对象的 draggable 属性设置为 true，或者可以使用 draggable() 方法。

注意：(!) 拖拽一条线不会更改 points 属性。相反，线条的 x 和 y 属性会发生更改。

原生

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

const layer = new Konva.Layer();

const redLine = new Konva.Line({
  x: 50,
  y: 50,
  points: [0, 0, 150, 0],
  stroke: 'red',
  strokeWidth: 15,
  lineCap: 'round',
  lineJoin: 'round',
  draggable: true,
});

// 添加鼠标样式
redLine.on('mouseover', function () {
  document.body.style.cursor = 'pointer';
});
redLine.on('mouseout', function () {
  document.body.style.cursor = 'default';
});

layer.add(redLine);
stage.add(layer);

Open Sandbox

React

import { Stage, Layer, Line } from 'react-konva';
import { useState } from 'react';

const App = () => {
  const [position, setPosition] = useState({ x: 50, y: 50 });

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Line
          x={position.x}
          y={position.y}
          points={[0, 0, 150, 0]}
          stroke="red"
          strokeWidth={15}
          lineCap="round"
          lineJoin="round"
          draggable
          onDragEnd={(e) => {
            setPosition({
              x: e.target.x(),
              y: e.target.y(),
            });
          }}
          onMouseEnter={(e) => {
            document.body.style.cursor = 'pointer';
          }}
          onMouseLeave={(e) => {
            document.body.style.cursor = 'default';
          }}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-line
        :config="lineConfig"
        @dragend="handleDragEnd"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, reactive } from 'vue';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const position = reactive({ x: 50, y: 50 });

const lineConfig = {
  x: position.x,
  y: position.y,
  points: [0, 0, 150, 0],
  stroke: 'red',
  strokeWidth: 15,
  lineCap: 'round',
  lineJoin: 'round',
  draggable: true
};

const handleDragEnd = (e) => {
  position.x = e.target.x();
  position.y = e.target.y();
};

const handleMouseEnter = () => {
  document.body.style.cursor = 'pointer';
};

const handleMouseLeave = () => {
  document.body.style.cursor = 'default';
};
</script>

Open Sandbox