Fabri cJS проверить, дважды ли щелкнул текстовый объект с помощью _onDoubleClick? - PullRequest
Новая
       111

Fabri cJS проверить, дважды ли щелкнул текстовый объект с помощью _onDoubleClick?

1 голос
/ 02 августа 2020

Я недавно поигрался со своим fabric.min.js файлом и наткнулся на это: 

_onDoubleClick: function(t) {
    this._cacheTransformEventData(t), this._handleEvent(t, "dblclick"), this._resetTransformEventData(t);
},

Итак, инстинктивно я решил посмотреть, что он делает, добавив функцию alert(). Как и ожидалось, он просто показывал предупреждение всякий раз, когда дважды щелкали мышью.

Я пытаюсь сделать другое предупреждение для типа объекта, если это имеет смысл. 

_onDoubleClick: function(t) {
    this._cacheTransformEventData(t), this._handleEvent(t, "dblclick"), this._resetTransformEventData(t);
    // This code doesn't work
    if (t.type === 'text') alert("You double-clicked on a text box")
    else alert("You double-clicked on a prop")
},

По сути, я просто хочу проверить, было ли дважды щелкните текстовое поле или нет, как я могу это сделать?

1 Ответ

1 голос
/ 07 августа 2020

Изменение самой библиотеки обычно никогда не бывает хорошей идеей. Fabri cJS использует эту функцию в качестве приятного интерфейса событий:

http://fabricjs.com/events http://fabricjs.com/fabric-intro-part-2#events

См. приведенный ниже пример, чтобы увидеть, как вы можете достичь того, что ищете, без изменения основной библиотеки. 

var canvas = new fabric.Canvas(document.querySelector('canvas'))
var textBox = new fabric.Text('Lorem Ipsum Dolor', { left: 20, top: 20 })
var circle = new fabric.Circle({ radius: 30, fill: 'green', left: 130, top: 75 })

// Listen on the text object
textBox.on('mousedblclick', function() {
  console.log('Text object was double clicked')
})

// Listen on the circle object
circle.on('mousedblclick', function() {
  console.log('Circle object was double clicked')
})

// Listen for any double click events on the canvas
canvas.on('mouse:dblclick', function(e) {
  if (e.target.type === 'circle') {
    console.log('The clicked object was a circle')
  } else if (e.target.type === 'text') {
    console.log('The clicked object was a text')
  }
})

canvas.add(textBox)
canvas.add(circle)

canvas.renderAll()
body {
    background: #f0f0f0;
    padding: 0;
    margin: 0;
}
canvas {
    border: 1px solid lightgray;
}
div {
    margin: 0.5em 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas width="400" height="150"></canvas>
...