fabricjs - 允許單擊文本編輯，但區分文本點擊和邊框點擊

Question

我目前已將我的IText元素設置爲單擊進入編輯模式，但我仍然希望用戶能夠移動文本。我已經爲文本元素添加了填充項，希望能夠區分邊框上的點擊（用戶想要移動文本）和直接點擊文本（編輯）之間的點擊。任何幫助將不勝感激..

Answer 1

對於任何有興趣的人，我想出了一個解決方案。當然，這並不理想，但它有效。你會想你的iText的元素，有5個或更多的像素的填充，以獲得良好的結果..

isOnBorder(mouseX, mouseY, coords, padding) { 
    let topLeftX = coords.tl.x + padding; 
    let topRightX = coords.tr.x - padding; 
    let topLeftY = coords.tl.y + padding; 
    let bottomLeftY = coords.bl.y - padding; 

    if (mouseX < topLeftX || mouseX > topRightX) { 
     return true; 
    } else if (mouseY < topLeftY || mouseY > bottomLeftY) { 
     return true; 
    } 

    return false; 
} 

傾聽對象：所選事件在畫布上

'object:selected': (event) => { 
    let object = event.target; 
    let mouseX = object._mousedownX; 
    let mouseY = object._mousedownY; 
    let coords = object.oCoords; 
    let padding = object.padding; 

    if (this.isOnBorder(mouseX, mouseY, coords, padding)) { 
    return; 
    } 

如果用戶沒有點擊邊框內的填充px，單擊即可進入編輯

object.enterEditing();