Как дифференцировать реакцию элементов конвы в одном слое с помощью event.target? - PullRequest
Новая
       38

Как дифференцировать реакцию элементов конвы в одном слое с помощью event.target?

0 голосов
/ 23 апреля 2019

Добрый день,

Я пытаюсь контролировать событие отпускания мыши.Цель состоит в том, чтобы продолжить ход элемента <Drawing>, когда он достигает <Label>, и остановить ход, когда он выходит за пределы <Stage>.MouseLeaveHandler () в <Drawing> останавливает обводку, когда событие mouseleave запускается через setState ().Проблема в том, что событие mouseleave также запускается, когда штрих проходит через <Label>, что приводит к его остановке.

Я попытался зарегистрировать объекты событий, и атрибут event.currentTarget, кажется, дает мне информацию, которую янеобходимо отличать отпуск мышью от <Label> Konva.Image и отпуск мышью от <Stage> Konva.Stage.Однако, поскольку свойство currentTarget доступно только для чтения, я не могу использовать его программно.Свойство target бесполезно, так как оно будет отображаться как тот же класс Konva.Image.

Мой вопрос будет таким: Как я могу отличить konva <Label> от <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>
...

Drawing.js 

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

Первое событие, когда удар ударяется о <Label>.Во-вторых, когда он покидает <Stage>.Как вы можете видеть, у currentTarget есть более полезная информация, чем свойство target

Logs

Любая помощь приветствуется.Спасибо!

1 Ответ

0 голосов
/ 23 апреля 2019

Вы можете использовать e.evt.type.Когда мышь находится за пределами сцены, она имеет значение mouseout, когда она попадает на метку, она имеет значение mousemove.

...