FabricJS是否用_onDoubleClick双击文本对象？

Question

我最近一直在使用我的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")
},

基本上，我只是想检查一个文本框是否被双击，我该怎么做呢？

Answer 1

更改库本身通常不是一个好主意。FabricJS使用该函数作为一个很好的events接口：

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>

​