试图清除选定的文字或字符时，整个文本被清除

Question

我使用的面料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 / backspace文本字符，整个文本被删除。因为当你进入文本编辑模式，文本对象仍处于选中状态检查if (this.state.selected !== undefined)是不够的。

不过，您还可以检查的iText的isEditing属性，看看所选择的对象也是在编辑模式：

  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"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>