javascript - Konva 文本边界

Question

我设置了一个简单的 Konva，其中包含图层、矩形和文本。

Canvas 随着窗口大小的调整而缩放。我的目标是在拖动时将文本包含在 Canvas 内。目前，它适用于左边界和上边界，但不适用于下边界和右边界。

我在这里做错了什么？

gif 插图

https://media.giphy.com/media/fBG0OGhFPwiHUOeGSJ/giphy.gif

代码

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import Konva from "konva";
import { Stage, Layer, Text, Rect } from "react-konva";

const CANVAS_INNER_PADDING = 5;

const Container = styled.div`
  width: 50vw;
  height: 50vw;
  background-color: lightgray;
`;

class Canvas extends React.Component {
  constructor(props) {
    super(props);
    this.container = React.createRef();
    this.rect = React.createRef();
    window.addEventListener("resize", this.updateCanvasDimensions);

    this.state = {
      text: {
        value: "hello",
        x: CANVAS_INNER_PADDING,
        y: CANVAS_INNER_PADDING
      },
      canvas: {
        width: 0,
        height: 0,
        color: "red"
      }
    };
  }

  componentDidMount() {
    this.updateCanvasDimensions();
  }

  updateCanvasDimensions = () => {
    const height = this.container.current.clientHeight;
    const width = this.container.current.clientWidth;

    this.setState({
      canvas: { ...this.state.canvas, height, width }
    });
  };

  handleDragMove = e => {
    const { canvas } = this.state;
    const newX = e.target.x();
    const newY = e.target.y();
    let newerX = newX;
    let newerY = newY;

    if (newX < CANVAS_INNER_PADDING) {
      newerX = CANVAS_INNER_PADDING;
    }

    if (newX > canvas.width - CANVAS_INNER_PADDING) {
      newerX = canvas.width - CANVAS_INNER_PADDING;
    }

    if (newY < CANVAS_INNER_PADDING) {
      newerY = CANVAS_INNER_PADDING;
    }

    if (newY > canvas.height - CANVAS_INNER_PADDING) {
      newerY = canvas.height - CANVAS_INNER_PADDING;
    }

    this.setState({
      text: { ...this.state.text, x: newerX, y: newerY }
    });
  };

  handleDragEnd = e => {
    const newX = e.target.x();
    const newY = e.target.y();

    this.setState({
      text: { ...this.state.text, x: newX, y: newY }
    });
  };

  render() {
    const { text, canvas } = this.state;

    return (
      // Have to use `innerRef` with Styled Components.
      <Container innerRef={this.container}>
        <Stage height={canvas.height} width={canvas.width}>
          <Layer>
            <Rect
              ref={this.rect}
              x={0}
              y={0}
              height={canvas.height}
              width={canvas.width}
              fill={canvas.color}
            />
            <Text
              ref={this.text}
              draggable
              onDragMove={this.handleDragMove}
              onDragEnd={this.handleDragEnd}
              text={`${canvas.height}, ${canvas.width}`}
              fill="black"
              x={text.x}
              y={text.y}
            />
          </Layer>
        </Stage>
      </Container>
    );
  }
}

const mapStateToProps = state => ({
  text: state.printState.text,
  canvas: state.printState.canvas
});

const rootElement = document.getElementById("root");
ReactDOM.render(<Canvas />, rootElement);

沙箱

https://codesandbox.io/s/6jnmvzyqmk

Answer 1

似乎已经解决了这个问题，我没有考虑文本的高度/宽度:

const { canvas } = this.props;
const { textHeight, textWidth } = this.text.current;

const newX = e.target.x();
const newY = e.target.y();
let newerX = newX;
let newerY = newY;

if (newX < CANVAS_INNER_PADDING) {
  newerX = CANVAS_INNER_PADDING;
}

if (newX + textWidth > canvas.width - CANVAS_INNER_PADDING) {
  newerX = canvas.width - CANVAS_INNER_PADDING - textWidth;
}

if (newY < CANVAS_INNER_PADDING) {
  newerY = CANVAS_INNER_PADDING;
}

if (newY + textHeight > canvas.height - CANVAS_INNER_PADDING) {
  newerY = canvas.height - CANVAS_INNER_PADDING - textHeight;
}