HTML5画布框架fabricjs学习笔记（三）——⾃定义选择控制框样式
⽬录
前⾔
这篇博⽂是《HTML5画布框架fabricjs学习笔记》系列博⽂的第三篇——⾃定义选择控制框样式，主要的内容有：
1. 如何修改控制框中的控制点、控制线的样式
2. 如何使⽤贴图覆盖默认的控制点样式
3. 如何添加⾃定义的控制点（如删除、锁定等）
框架介绍、引⼊及索引部分见
什么是选择控制框？
我们以前⽂中的⼀个例⼦作为⽰例。如下图，当我们点击⼀个画布中的对象，对象周围就出现了⼀个控制框，控制框上⼀共9个控制点。
控制线
如上图所⽰，控制框的范围由控制线限定。 ⾃定义时，根据需要，我们⼀般会修改控制线的以下属性：rotate属性
是否显⽰
颜⾊
与框选对象间的内边距
控制点
如上图所⽰，点击并拖动不同的控制点，会产⽣不同的交互效果。 下⾯区分不同的控制点类型分别进
⾏介绍：⽔平缩放控制点： 即第⼀列中间和第三列中间两个控制点。点击并进⾏拖动，会改变对象的⽔平缩放值（scaleX，初始值为1）竖直缩放控制点： 即第⼆列第⼆⾏和第三⾏两个控制点。点击并进⾏拖动，会改变对象的竖直缩放值（scaleY，初始值为1）等⽐例缩放控制点： 即左上、右上、左下、右下四个控制点。点击并进⾏拖动，会同时并等⽐例改变对象的scaleX和scaleY两个值中⼼旋转控制点： 即第⼆列最上⽅的控制点。点击并进⾏拖动，会改变对象的⾓度值（angle，初始值为0）
注意：
1. 左上的等⽐例缩放控制点还会改变对象的top和left值。
2. 左中的⽔平缩放控制点还会改变对象的left值。
3. 中⼼旋转控制点还会改变对象的top和left值。
这些在后续做⼀些例如撤销、重做等业务逻辑时，需要特别进⾏考虑和编码实现。
⾃定义控制线样式
上⽂中提到，我们⼀般对控制线是否显⽰、颜⾊、与框选对象间的内边距这⼏个属性进⾏⾃定义修改。这⾥⽤另⼀个例⼦，对上述属性逐⼀进⾏介绍。
如图所⽰，⼀个黄⾊的矩形，其默认的控制线样式如下：
接下来我们对他的控制线样式进⾏修改。
与框选对象间的内边距
我们将内边距设置为10px
代码
fabric.Object.prototype.padding =10;
代码说明
padding即内边距，⽬前只⽀持4个⽅向的统⼀设置，不⽀持单独设置
结果
是否显⽰
现在换回黄脸表情，我们之前见过的编辑器，其旋转控制点和主体之间⼀般没有那条控制线，这⾥我们对它进⾏隐藏。
代码
fabric.ls.mtr.withConnection =false;
代码说明
1. fabric.Object是所有对象的⽗类，修改其属性即可对它的⼦类（Rect、Circle…）都⽣效。
2. controls包含了Object类的所有控制点的信息。
3. mtr是middle top rotation的缩写，即中⼼旋转控制点。
4. withConnection即mtr是否和主体有连线，此处设为false。
结果
可见，旋转控制点和主体之间的那条连接线没有了
颜⾊
我们将控制线默认的浅蓝⾊改为dodgerblue，⼀种深蓝⾊
代码
fabric.Object.prototype.borderColor ='dodgerblue';
代码说明
borderColor即控制线的颜⾊，⽀持英⽂单词、rgb格式、rgba格式、16进制格式
结果
⾃定义控制点样式
对于控制点，我们可以⾃定义修改其形状、⼤⼩、边框颜⾊、填充颜⾊等属性。这⾥对于各个属性不再⼀⼀介绍，我们⽤⼀个综合的例⼦对它们进⾏演⽰。
代码
// 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
fabric.Style ="circle";
// 修改控制点的填充⾊为⽩⾊
fabric.Color ="white";
// 修改控制点的⼤⼩为10px
fabric.Size =10;
// 设置控制点不透明，即可以盖住其下的控制线
fabric.ansparentCorners =false;
// 修改控制点的边框颜⾊为`gray`灰⾊
fabric.StrokeColor ="gray";
// 单独修改旋转控制点距离主体的纵向距离为-20px
fabric.ls.mtr.offsetY =-20;
// 单独修改旋转控制点，光标移动到该点上时的样式为`pointer`，⼀个⼿的形状    fabric.ls.mtr.cursorStyle ="pointer";
结果
⾃定义控制点贴图
例设我们要将中⼼旋转控制点样式改为如下的贴图：
代码
// 渲染图标的⽅法
static renderIcon(image, initialAngle){
return function(ctx, left, top, styleOverride, fabricObject){
let size =Size;
ctx.save();
ctx.drawImage(image,-size /2,-size /2, size, size);
}
}
/
/ 图标的下载链接省略
const iconURL ="...";
const callback=(image, isError)=>{
if(!isError){
fabric.ls.ml =new fabric.Control({
x:0,
y:-0.5,
offsetY:-20,
cursorStyle:'pointer',
actionHandler: ationWithSnapping,
cursorStyleHandler: ationStyleHandler,
/
/ 渲染图标
derIcon(image._element,0),
// 设置控制点⼤⼩
cornerSize:30
});
}
};
fabric.Image.fromURL(iconURL, callback);
代码说明
fabric.Control声明的是⼀个控制点对象，其包含以下属性：
1. x和y：表⽰控制点距离对象中⼼点的位置，坐标轴横轴左负右正，纵轴上负下正。
2. cursorStyle：光标移动到控制点上时的样式。可选的值有w/e/s/n-resize、pointer等，即东西南北⽅向的箭头、⼿的图标等。
3. actionHandler：⽤户拖动该控制点时的动作处理器，这⾥使⽤默认的scalingX，即⽔平⽅向缩放处理器。以此类推，可选的控制器还
有scalingY、rotationWithSnapping（旋转）等。
4. render：渲染⽅法，调⽤现成的⽅法即可。
5. cornerSize：控制点⼤⼩，可以控制贴图的⼤⼩。
结果
添加⾃定义控制点
有的时候，我们可能不满⾜于默认提供的9个控制点，想要⾃⼰添加⼀些控制点上去，⽐如⽤于删除对象的控制点。这个⼩节，我们使⽤⼀个红⾊的垃圾桶图标来实现它。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。