Come aumentare l'area di selezione di un oggetto tessuto?

Question

consideri il codice seguente:

var lineObj = new fabric.Line([120,200,320,200],{ 
    stroke: '#000000', 
    strokeWidth: 1 
}); 
canvas.add(lineObj); 

Questa linea 1 pixel è molto difficile scegliere per la sua larghezza molto ridotta. Quello che desidero fare qui è aumentare la sua area di selezione. Ti piace questa:

C'è un modo in cui posso fare questo?

Answer 1

Sì, abbiamo padding valore per quella.

var lineObj = new fabric.Line([120,200,320,200], { 
    stroke: '#000000', 
    strokeWidth: 1, 
    padding: 20 
}); 
canvas.add(lineObj); 

Ho già detto tessuto è flessibile e potente? :)

@markE Bella soluzione! Sono contento che tu stia trovando facile camminare attraverso il codice sorgente.

Answer 2

Cattive notizie - nessuna soluzione in API/Buone notizie - si può codice la soluzione

L'API non fornisce un modo per espandere la BoundingBox di una linea, quindi non c'è alcun API modo per ottenere un'area di selezione più ampia per le linee.

FabricJS è open source e ben organizzato e il codice sorgente stesso ha commenti utili. Ecco cosa ho trovato ...

Gli oggetti "Linea" estendono l'oggetto "Oggetto". L '"Oggetto" ha metodi di supporto e il più pertinente è nel file object_geometry.mixin.js. Lì ho scoperto che il boundingbox per ogni oggetto è stato generato usando il metodo getBoundingRect().

hai chiesto "C'è un modo ...", quindi ecco in questo modo:

Quindi, per risolvere il problema, è necessario troppo cavalcare l'getBoundingRect() per le linee e renderla leggermente più ampio . Questo renderà automaticamente l'area di selezione delle tue linee più ampia e più facilmente cliccabile. @ Kaxax, sentiti libero di indicare qualsiasi soluzione più semplice!

Per iniziare, qui è la fonte per getBoundingRect() dai object_geometry.mixin.js file sorgente:

getBoundingRect: function() { 
    this.oCoords || this.setCoords(); 

    var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x]; 
    var minX = fabric.util.array.min(xCoords); 
    var maxX = fabric.util.array.max(xCoords); 
    var width = Math.abs(minX - maxX); 

    var yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y]; 
    var minY = fabric.util.array.min(yCoords); 
    var maxY = fabric.util.array.max(yCoords); 
    var height = Math.abs(minY - maxY); 

    return { 
    left: minX, 
    top: minY, 
    width: width, 
    height: height 
    }; 
}, 

/** 
* Returns width of an object 
* @method getWidth 
* @return {Number} width value 
*/ 
getWidth: function() { 
    return this.width * this.scaleX; 
}, 

/** 
* Returns height of an object 
* @method getHeight 
* @return {Number} height value 
*/ 
getHeight: function() { 
    return this.height * this.scaleY; 
}, 

/** 
* Makes sure the scale is valid and modifies it if necessary 
* @private 
* @method _constrainScale 
* @param {Number} value 
* @return {Number} 
*/ 
_constrainScale: function(value) { 
    if (Math.abs(value) < this.minScaleLimit) { 
    if (value < 0) 
     return -this.minScaleLimit; 
    else 
     return this.minScaleLimit; 
    } 

    return value; 
}