如何增加一个结构对象的选择区域?
考虑下面的代码:如何增加一个结构对象的选择区域?
var lineObj = new fabric.Line([120,200,320,200],{
stroke: '#000000',
strokeWidth: 1
});
canvas.add(lineObj);
这1条像素线是非常困难的选择由于其非常小的宽度。 我想在这里做的是增加其选择区域。 像这样:
有什么办法中,我能做到这一点?
是的,我们为padding
价值。
var lineObj = new fabric.Line([120,200,320,200], {
stroke: '#000000',
strokeWidth: 1,
padding: 20
});
canvas.add(lineObj);
我提到面料是灵活和强大? :)
@markE尼斯解决方案!很高兴你发现很容易通过源代码。
坏消息 - 在API /好消息无解 - 你可以代码解决方案
的API不提供一种方法来扩展线的外接矩形框,所以没有API以获得更大的线路选择区域。
FabricJS是开源的,组织良好,源代码本身有有用的评论。这是我发现的...
“线”对象扩展“对象”对象。 “对象”具有助手方法,最相关的是在文件object_geometry.mixin.js中。在那里,我发现使用getBoundingRect()方法生成任何对象的边界框。
你并问:“有什么办法......”,所以这里是这样:
所以要解决你的问题,你必须过骑getBoundingRect()为线,使其稍宽。这将自动使您的线条选区更宽,更容易点击。 @Kangax,随时指出任何更简单的解决方案!
为了让您一开始,这里是getBoundingRect源()从源文件object_geometry.mixin.js:
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;
}
我也对fabric.js文件进行了更改,但这影响了启用/禁用此功能的灵活性和易用性。感谢所有相同的@markE。 – Siddhant 2013-03-14 06:22:44
我没有看到任何使用API的方式来增加该行的hittest边界框的大小。 – markE 2013-03-13 19:24:35