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 使用该函数作为一个很好的事件接口：

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>

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

FabricJS check if double clicked on a text object with _onDoubleClick?

javascript

canvas

html5-canvas

fabricjs