Question

我正在将Fabric js与reactjs一起用于将文本添加到画布。添加了文本，但是当我尝试清除字符或所选单词时，整个文本将被清除。我看到了一些与此相关的资源，但是我正在使用reactjs，因此很难为我解决此问题。这是我的工作方式

class ImageBoard extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: undefined
    };
  }

  handleDeleteKey = event => {
    if (event.keyCode === 46 || event.keyCode === 8) {
      event.preventDefault();
      if (this.state.selected !== undefined) {
        this.canvas.remove(this.state.selected);
        this.setState({ selected: undefined });
      }
    }
  };

  componentDidMount() {
    this.canvas = new fabric.Canvas("canvas");
    document.addEventListener("keydown", this.handleDeleteKey, false);
    this.canvas.on("object:selected", e =>
      this.setState({ selected: e.target })
    );
    this.canvas.on("selection:cleared", e =>
      this.setState({ selected: undefined })
    );
    this.canvas.setBackgroundColor(
      "rgba(255, 73, 64, 0.6)",
      this.canvas.renderAll.bind(this.canvas)
    );
  }

  componentDidUpdate(prevProps) {
    if (prevProps.images !== this.props.images) {
      this.setCanvasBackground(this.props.images, this.canvas);
    }
  }

  addText = () => {
    let text = new fabric.IText("Double click me to change the text!", {
      fontSize: 28,
      fontWeight: 600,
      left: 100,
      top: 100,
      fill: "black",
      width: 20,
      height: 20
    });
    this.canvas.add(text);
  };

  render() {
    return (
      <Wrapper>
        <Column width={80}>
          <canvas
            id="canvas"
            ref={el => (this.canvasEl = el)}
            width={580}
            height={400}
            className="z-depth-1"
          />
        </Column>
        <Filter
          addText={this.addText}
        />
      </Wrapper>
    );
  }
}

export default connect(mapStateToProps)(ImageBoard);

Answer 1

由于要在delete / backspace密钥处理程序中删除选定的对象，因此当您尝试使用delete / {{1 }}，整个文本将被删除。条件检查backspace不够，因为当您进入文本编辑模式时，仍然选择了文本对象。

但是，您还可以检查IText的isEditing属性，以查看所选对象是否也处于编辑模式：

if (this.state.selected !== undefined)

这是一个有效的代码片段，用于演示：

  handleDeleteKey = event => {
    if (event.keyCode === 46 || event.keyCode === 8) {
      if (this.state.selected !== undefined && !this.state.selected.isEditing) {
        event.preventDefault();
        this.canvas.remove(this.state.selected);
        this.setState({ selected: undefined });
      }
    }
  };

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: undefined
    };
  }

  handleDeleteKey = event => {
    
    if (event.keyCode === 46 || event.keyCode === 8) {
      if (this.state.selected !== undefined && !this.state.selected.isEditing) {
        event.preventDefault();
        this.canvas.remove(this.state.selected);
        this.setState({ selected: undefined });
      }
    }
  };

  componentDidMount() {
    this.canvas = new fabric.Canvas("canvas");
    document.addEventListener("keydown", this.handleDeleteKey, false);
    this.canvas.on("object:selected", e =>
      this.setState({ selected: e.target })
    );
    this.canvas.on("selection:cleared", e =>
      this.setState({ selected: undefined })
    );
    this.canvas.setBackgroundColor(
      "rgba(255, 73, 64, 0.6)",
      this.canvas.renderAll.bind(this.canvas)
    );
  }

  addText = () => {
    let text = new fabric.IText("Double click me to change the text!", {
      fontSize: 28,
      fontWeight: 600,
      left: 20,
      top: 20,
      fill: "black",
      width: 20,
      height: 20
    });
    this.canvas.add(text);
  };

  render() {
    return (
      <div>
        <canvas
          id="canvas"
          ref={el => (this.canvasEl = el)}
          width={400}
          height={170}
        />
        <button onClick={this.addText}>
          add
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

尝试清除所选单词或字符时，整个文本将被清除

1 个答案: