0

再会，

我正在尝试控制 mouseleave 事件。<Drawing>目标是在元素碰到 a 时继续该元素的笔划，<Label>并在它超出<Stage>. <Drawing>当通过 setState() 触发 mouseleave 事件时，mouseLeaveHandler() on会停止描边。问题是当笔划通过<Label>导致它停止时也会触发 mouseleave 事件。

我尝试记录事件对象，并且 event.currentTarget 属性似乎为我提供了区分 mouseleave 与<Label>Konva.Image 以及 mouseleave 与<Stage>Konva.Stage 所需的信息。但是，由于 currentTarget 属性是只读的，我不能以编程方式使用它。目标属性没有用，因为它会显示为同一个类 Konva.Image。

我的问题是，如何通过事件对象将 konva<Label>与a 区分开来？<Stage>我可以向事件目标添加其他属性以使一个与另一个不同吗？

到目前为止我所拥有的：

...
<Stage>
 <Layer>
  <Image />
 </Layer>

 <Layer onMouseMove={(e) => this.onMouseLayerMoveHandler(e)} onMouseEnter={this.onMouseLayerEnterHandler}>
  {/* This is where the Drawing happens */}
  <Drawing
   mode={this.state.isErasing ? 'eraser' : 'brush'}
   brushSize={this.state.brushSize}
   canvasHeight={this.state.canvasHeight}
   canvasWidth={this.state.canvasWidth}
   brushColor={this.state.brushColor}
   hasDrawnHandler={(status) => this.hasDrawnHandler(status)}
   />
   {/* This is where the Label Starts */}
   {this.state.isEditing ? portal : null}
   {this.state.commentsArray.map(comment => {
    let commentValue = comment.value;
    let commentValueArray = commentValue.split(" ");
    let formattedComment = "";

    for (var i = 0; i < commentValueArray.length; i++) {
      if (i > 0) {
       if (i % 10 === 0 && i < commentValueArray.length) {
        formattedComment += '\n';
       }
      }
      formattedComment += " " + (commentValueArray[i] ? commentValueArray[i] : "");
    }

    return (
     <Label
      key={comment.uuid}
      draggable={true}
      x={comment.x}
      y={comment.y}
      width={comment.value.length}
      onDragStart={this.onDragStartHandler}
      onDragEnd={(e) => { this.onDragEndHandler(e, comment) }}
      onMouseEnter={this.onMouseLabelEnterHandler}
      onMouseLeave={this.onMouseLabelLeaveHandler}
     >

    <Tag />
    <Text />

    </Label>
     )
    })}
   </Layer>
</Stage>
...

绘图.js

mouseLeaveHandler = (e) => {
  console.log(e);
  this.setState({ isDrawing: false });
}

第一个事件是当中风击中<Label>. 其次是它离开的时候<Stage>。如您所见， currentTarget 比 target 属性有更多有用的信息

日志

任何帮助表示赞赏。谢谢！

4

1 回答 1

0

您可以使用 e.evt.type。当鼠标在舞台外时，它有一个 mouseout 值，当它击中它有 mousemove 值的标签时。

于 2019-04-23T16:28:59.327 回答