Jak zwiększyć obszar wyboru obiektu z tkaniny?

Question

Rozważmy następujący kod:

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

Ta linia 1 piksel jest bardzo trudno wybrać ze względu na jego bardzo małej szerokości. Co chcę tutaj zrobić, to zwiększyć jego obszar wyboru. Jak to:

Czy istnieje jakiś sposób, w jaki można to osiągnąć?

Answer 1

Tak, mamy padding wartość dla tego.

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

Wspominałam Materiał jest elastyczny i potężny? :)

@markE Ładne rozwiązanie! Cieszę się, że łatwo można przejść przez kod źródłowy.

Answer 2

Bad news - nie rozwiązanie w API/dobrą wiadomość - może kod rozwiązanie

API nie zapewnia sposób, aby rozwinąć boundingbox linii, więc nie ma API sposób, aby uzyskać większy obszar wyboru dla linii.

FabricJS jest open-source i dobrze zorganizowany, a sam kod źródłowy ma przydatne komentarze. Oto, co znalazłem ...

Obiekty "liniowe" rozszerzają obiekt "Obiekt". "Obiekt" ma metody pomocnicze, a najbardziej istotne jest w pliku object_geometry.mixin.js. Tam odkryłem, że boundingbox dla dowolnego obiektu jest generowany za pomocą metody getBoundingRect().

Ty pytałem: „Czy jest jakiś sposób ...”, tak oto w ten sposób:

Tak, aby rozwiązać problem, należy nadmiernie jeździć getBoundingRect() dla linii i uczynić go nieco szerzej . Spowoduje to automatyczne poszerzenie obszaru wyboru twoich linii i łatwiejsze kliknięcie. @Kangax, możesz wskazać dowolne prostsze rozwiązanie!

aby zacząć, tutaj jest źródłem getBoundingRect() z object_geometry.mixin.js plików źródło:

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; 
}