- 快速入门
- Fabric.js 介绍
- Part 1:Objects 对象、Canvas 画布、Images 图像、Paths 形状
- Part 2:Animation 动画、Image filters 图像滤镜、Colors 颜色、Gradients 渐变、Text 文本、Events 事件
- Part 3:Groups 组合、Serialization 序列化、Deserialization、SVG parser 反序列化、SVG 解析器、Subclassing
- Part 4:Free drawing 自由绘画、Customization 可定制化、Fabric on Node.js
- Part 5:Zoom and panning 缩放和平移
- Part 6:Using transformations 使用转换
- Part 7:对 Text 类进行子分类以生成位图文本
- Part 8:裁切 和 ClipPath 裁切路径
- 自定义控件 API
- FabricJS 的缺陷
- Fabric.js 对象缓存
- Fabric.js 示例:自定义控件、多边形
- Fabric.js 示例:与画布外的对象交互
- API
- BaseBrush
- Canvas
- Circle
- CircleBrush
- Color
- Ellipse
- Gradient
- Group
- Image
- Intersection
- IText
- Line
- Object
- Observable
- Path
- PathGroup
- Pattern
- PatternBrush
- PencilBrush
- Point
- Polygon
- Polyline
- Rect
- Shadow
- SprayBrush
- StaticCanvas
- Text
- Triangle
IText
fabric.IText
构造函数: new IText()
说明:IText 是在版本 1.4 引入的,当 Canvas 处理被监控状态下时,"text:"前缀的事件会被触发。支持的按键组合如下:
Move cursor: left, right, up, down
Select character: shift + left, shift + right
Select text vertically: shift + up, shift + down
Move cursor by word: alt + left, alt + right
Select words: shift + alt + left, shift + alt + right
Move cursor to line start/end: cmd + left, cmd + right
Select till start/end of line: cmd + shift + left, cmd + shift + right
Jump to start/end of text: cmd + up, cmd + down
Select till start/end of text: cmd + shift + up, cmd + shift + down
Delete character: backspace
Delete word: alt + backspace
Delete line: cmd + backspace
Forward delete: delete
Copy text: ctrl/cmd + c
Paste text: ctrl/cmd + v
Cut text: ctrl/cmd + x
Select entire text: ctrl/cmd + a
可触发事件:event:changed、selection:changed、editing:entered、editing:exited
父类: fabric.Text
内部包含类: fabric.Observable
类属性成员:
instance(Array):static 成员,装载着所有被创建的 fabric.IText 实例。
angle(Number):Object 的旋转角度(以度为单位)。
backgroundColor(String):Object 的背景颜色,只有赋值字符串时才起作用。
borderColor(String):Object 为激活状态时,控制器的边框颜色。默认值为:rgba(102,153,255,0.75)。
borderOpacityWhenMoving(Number):当 Object 处于激活或移动状态时,控制器边框的透明度。默认值为:0.4。
borderScaleFactor(Number):Object 控制器四边的缩放因子,默认为 1。
caching(Boolean):指明内部的文字宽度是否被缓存。
centeredRotation(boolean):当属性为 true 时,通过控制器进行旋转的时候将以 Object 的中点为原点进行旋转,默认 true。向下兼容提示:该属性替代了旧版本的 centerTransform(boolean) 属性。
centeredScaling(boolean):当属性为 true 时,将以 Object 的中点作为缩放的原点,默认 false。向下兼容提示:该属性替代了旧版本的 centerTransform(boolean) 属性。
clipTo(Function):该属性是一个函数,决定了如何对 Object 进行裁剪(Context 作为函数的和一个参数传入)。要注意 Context 的原点是 Object 的中点(而不是左上角的那个点)。
cornerColor(String):Object 控制器(激活的时候)四角的颜色,默认值为:rgba(102,153,255,0.5)。
cornerSize(Number):Object 控制器四角的大小,以像素为单位,默认值为:12。
cursorColor(String):没有被文字样式覆盖时的光标默认颜色,默认值为"#333"。
curosrDelay(Number):光标闪烁之间的延时,以毫秒为单位,默认值为 1000。
cursorDuration(Number):光标渐显进入的时长,以毫秒为单为,默认值为 600。
cursorWidth(Number):光标的宽度,以像素为单位,默认值为 2。
editable(boolean):指示该 Text 是否能被编辑,默认值为 true。
editingBorderColor(String):处于编辑状态时 Text 的边框颜色,默认值为" rgba(102,153,255,0.25)"。
evented(boolean):当属性为 false 时,该 Object 将不会成为事件的目标,默认 true。所有的事件传递都会经过该属性。该属性是在 1.3.4 版本之后引入的。
fill(String):Object 填充的颜色,默认值为:rgb(0,0,0)。
fillRule(String):该属性用于填充 Object,只能接受值"nonzero",默认值也是"nonzero"。向下兼容提示:该属性在 1.4.2 版本之前都是用 fabric.Object.globalCompositeOperation 函数替代的。
flipX(boolean):当属性为 true 时,Object 将以水平翻转的样式被渲染。默认为 false。
flipY(boolean):当属性为 true 时,Object 将以垂直翻转的样式被演染。默认为 false。
fontFamily(String):字体名称,默认值为" Times New Roman"。
fontSize(Number):字体大小,以像素为单位,默认值为 40。
fontStyle(String):字体的样式,可选值为:"","normal","italic","oblique"。
fontWeight(String | Number):字体的粗细,可设置的值示例:"normal","bold",400,600,800。默认为"normal"。
globalCompositeOperation(String):为 Canvas 的 globalCompositeRule 设置的混合规则。默认值为:"source-over"。
hasBorders(boolean):当属性为 false 时,Object 的控制器边框将不会被渲染。默认值为:true。
hasRotatingPoint(boolean):当属性为 false 时,Object 的控制器旋转点将不会显示和被选中。默认为 true。
includeDefaultValues(boolean):当设置为 false 时,Object 序列化过程中将不会包含其默认值。默认为 true。
isEditing(boolean):指明 Text 是否处理编辑模式,默认值为 false。
left(Number):Object 的左边位置,即 X 坐标。注意:在默认情况下,是以 Object 中点进行计算,你可以设置 originx={left|center|right}进行改变。默认值为 0。
lineHeight(Number):行高,默认为 1.3。
lockMovementX(boolean):当设置为 true,Object 的水平移动将被锁定。默认值为 false。
lockMovementY(boolean):当设置为 true,Object 的垂直移动将被锁定。默认值为 false。
lockRotation(boolean):当设置为 true,Object 的旋转将被锁定。默认值为 false。
lockScalingFlip(boolean):当设置为 true,Object 将通过缩放到负值从而实现被翻转。默认值为 false。
lockScalingX(boolean):当设置为 true,Object 水平方向将无法被缩放。默认值为 false。
lockScalingY(boolean):当设置为 true,Object 垂直方向将无法被缩放。默认值为 false。
lockUniScaling(boolean):当设置为 true,Object 将无法被锁定比例进行缩放。默认值为 false。
minScaleLimit(Number):Object 缩放比例最小值,默认值为 0.01。
oCoords(Object):Object 包含的控制器的坐标,默认值为 null。
opacity(Number):Object 的透明度,默认值为 1。
originX(String):Object 平移的水平起始点,可选值有"left"|"right"|"center"默为值为"left"。查阅 http://jsfiddle.net/1ow02gea/40/ 获知 originX 和 orginY 是如何影响 Group 中的 Object。
originY(String):Object 平移的垂直起始点,可选值有"top"|"bottom"|"center"默为值为"top"。查阅 http://jsfiddle.net/1ow02gea/40/ 获知 originX 和 orginY 是如何影响 Group 中的 Object。
padding(Number):Object 与其控制器边框中间的空白间距,以像素为单位,默认为 0。
path(String | null):当使用 Cufon 时,设置字体文件的 URL。默认为 null。
边框盒模型。默认为 false。
rotatingPointOffset(Number):Object 控制器旋转点的偏移量(当 hasRotatingPoint 设置为 true 时才有效),默认值为 40。
scaleX(Number):Object 水平方向的缩放因子。默认值为 1。
scaleY(Number):Object 垂直方向的缩放因子,默认值为 1。
selectionColor(String):被选中的文字的颜色,默认值为" rgba(17,119,255,0.3)"。
selectionEnd(Number):选中的文本末端的位置,默认值为 0。
selectionStart(Number):选中的文本的起始位置(或者是当没有选中任何文本时,光标的当前位置),默认值为 0。
shadow(fabric.Shadow):当前图形的 Shadow 对象,默认为 null。
stateProperties(Array):属性列表,用于检查 Object 的状态是否改变(fabric.Object.hasChanged)。目的在于实现历史状态的 redo 和 undo 操作。
stroke(String):当该属性有定义的时候,Object 将通过该属性定义的线条以及颜色进行渲染。默认为 null。
strokeDashArray(Array):用于装载 Object 线条的破折号样式的数组(stroke 属性必须已被定义)。
strokeLineCap(String):Object 线条的终端样式,可选值有"butt"|"round"|"square",默认值为"butt"。
strokeLineJoin(String):Object 线条连接处边角的样式,可选值有"bevil"|"round"|"miter",默认值为"miter"。
strokeMiterLimit(Number):Object 线条链接处的最大斜角长度(当 strokeLineJoin 值设置为 miter 时起作用),默认值为 10。
strokeWidth(Number):用于渲染 Object 的线条的宽度,默认值为 1。
styles(Object):该 Object 包含着文字的样式(顶层属性“行数”以及二级属性“每行字数”),默认值为 null。
textAlign(String):文字的对齐方式,可选值为:"left","center","right"。
textBackgroundColor(String):文字每一行的背景色。
textDecoration(String):文字修饰,可选值有:"","underline","overline","line-through"。
top(Number):Object 的顶部位置。注意:默认情况下是相对于 Object 的中点,你可以设置 originY={top|center|bottom}进行改变。默认值为 0。
transformMatrix(Array):变换矩阵(类似于 SVG 的变换矩阵)。
transparentCorners(boolean):当设置为 true 时,Object 的控制器边缘内部将会被渲染为透明,默认值为 true。
type(String):Object 的类型,可选值为"rect"|"circel"|"path"等,默认值为"object"。要注意的是,这个属性为只读,不能进行修改。如果你修改这个属性的值,Fabric 框架特定部分(比如 JSON 加载)将会不正常。
useNative(Boolean):指明 Canvas 是否使用本地文本函数对文字进行渲染(如果 false,则使用 Cufon)。默认为 true。
visible(boolean):当设置为 false,Object 将不会在 Canvas 上被渲染。默认值为 true。
类函数成员:
static fabric.IText fromObject(Object):通过指定的 Object 返回对应的 fabric.IText 实例。
void _renderControls(CanvasRenderingContext2D, boolean opt):渲染 Object 的控制器以及边框。第一个参数是渲染的 Context;第二个参数若设置为 true,则相关的 Context 则不会被变换。
void _restoreCompositeOperation(CanvasRenderingContext2D):在 Object 变更渲染之后,保存之前的保存的画布操作(globalCompositeOperation)。参数则是指定在其上染上的 Context。
fabric.Text _set(String, Any):给指定的属性设置指定的值。
void _setupCompositeOperation(CanvasRenderingContext2D):为指定的 Object 设置一个画布全局操作(globalCompositeOperation)。特定的 Object 自定义操作可以通过设置 globalCompositeOperation 属性进行设置。参数则是指定在其上染上的 Context。
void abortCursorAnimation():中止光标动画,并清除所有的定时器。
void adjustPosition(String):参数可选值为"left"|"center"|"right"。
fabric.Object animate(String | Object, Number | Object):对指定的属性进行动画变换。第一个参数是用于动画的属性(Object 类型可指定多个);当参数一为 String 时,参数二为变换的终点值,否则为对象选项。具体可参照: http://fabricjs.com/fabric-intro-part-2/#animation。
fabric.Object bringForward(boolean opt):将绘制的 Object 在栈中位置向上移动。当参数设置为 true 时,将 Object 置于下一个相交的 Object 之上。
fabric.Object bringToFront():将 Ojbect 移到绘图栈的最顶端。
fabric.Ojbect center():在 Canvas 的水平和垂直方向上居中 Object。居中操作之后,你需要调用 Object 的 setCoords() 函数来更新控制区。
fabric.Object centerH():在 Canavs 的水平方向上居中 Object。之后,你需要调用 Object 的 setCoords() 函数来更新控制区。
fabric.Object centerV():在 Canvas 的垂直方向上居中 Object。之后,你需要调用 Object 的 setCoords() 函数来更新控制区。
fabric.Object clone(Function, Array):深度复制 Object。第一个参数是回调函数,该回调的第一个参数是复制出来的 Object;第二个参数是一个数组,装载着你想要添加到输出的所有属性。
fabric.Object cloneAsImage(Function):从 Object 创建出一个新的 fabric.Image 实例。参数是一个回调函数,该回调的第一个参数是复制出来的 fabric.Image 实例。
Number complexity():返回一个实例的复杂度。(译者注:该函数估计会被各子类重载,因为这个函数在 Object 类中直接返回 0)。
boolean containsPoint(fabric.Point):检查指定的点是否包含在 Object 中。
void copy(Event):复制选中的文本。
void cut(Event):剪切文本。
fabric.Object drawBorders(CanvasRenderingContext2D):绘制 Object 盒模型的四周,要求有以下公共属性:width、height、padding、borderColor。
fabric.Object drawControls(CanvasRenderingContext2D):绘制 Object 盒模型的控制器,要求有以下公共属性:width、height、conerSize、padding。
fabric.IText enterEditing():进入编辑状态。
fabric.IText exitEditing():退出编辑状态。
Number findLineBoundaryLeft(Number):寻找参数指定的当前行的起始位置,作为新选中块的起始索引。
Number findLineBoundaryRight(Number):寻找参数指定的当前行的结束位置,作为新选中块的结束索引。
void forwardDelete():向前删除。
fabric.Object fxstraighten(Object):和 fabric.Object.prototype.straighten() 的作用一样,只不过带了动画效果。参数是一个 Object,里面有两个元素 onComplete 和 onChange,分别是两个回调函数。onComplete 在动画结束之后调用,onChange 在动画的每一阶段分别调用。
Any get(String):最基本的 getter 函数,参数为想要获取的属性名。
Object get2DCursorLocation(Number opt):返回二维表示的光标(或选中起始)位置。返回值包含 lineIndex 和 charIndex 两项。参数是一个可选的索引,如果没有传值,则使用当前选中的位置。
Number getAngle():获得 Object 的旋转角度,以“度”为单位。
Object getBoundingRect():返回 Object 的边框矩形坐标。返回值是一个 Object 类型,其中包括了 left、top、width、height 四个元素。
Number getBoundingRectHeight():返回 Object 的边框矩形的高度。(版本 1.0.4 开始已废弃)
Number getBoundingRectWidth():返回 Object 的边框矩形的宽度。(版本 1.0.4 开始已废弃)
fabric.Point getCenterPoint():返回 Object 的真实中点坐标。
Function getClipTo():获得 Object 的裁剪函数。
String getCurrentCharColor(Number, Number):返回指定位置的 color(fill) 值。第一个参数为 lineIndex,第二个参数为 charIndex。
Number getCurrentCharFontSize(Number, Number):返回指定位置的 fontSize 值。第一个参数为 lineIndex,第二个参数为 charIndex。
Object getCurrentCharStyle(Number, Number):返回指定位置的文字的完整样式。第一个参数为 lineIndex,第二个参数为 charIndex。返回值 Object 中包含如下成员:fontSize、fill、textBackgroundColor、textDecoration、fontFamily、fontWeight、fontStyle、stroke、strokeWidth。
Number getDownCursorOffset(Event, boolean):获取选中块的起始偏移量。第一个参数为事件对象,第二个参数指明是否从右边开始选中。
String getFill():获得 Object 的填充颜色。
boolean getFlipX():获得 Object 的 flipX 属性。
boolean getFlipY():获得 Object 的 flipY 属性。
String getFontFamily():获取 Object 的字体名称。
String getFontSize():获取 Object 的字体大小。
String getFontStyle():获取 Object 的字体样式。
String | Number getFontWeight():获取 Object 字体粗细。
Number getHeight():获得 Object 的高度。
Number getLeft():获得 Object 左边的位置,即 X 坐标,以像素为单位。
Number getLineHeight():获取 Object 的文字行间距。
Object getLocalPointer(Event, Object opt):获取一个点在 Object 上的本地坐标。注意:第二个参数可选。这个函数默认情况下是获取当前鼠标所在点的本地坐标,如果指定了第二个参数,则该函数将获取第二个参数指定的点的本地坐标。返回值和第二个函数都是 Object,包函 x、y 两个成员。
Number getNumNewLinesInSelectText():返回选中文本中新行的数量。
Number getOpacity():获取 Object 的透明度,在 0 到 1 之间的数字。
String getOriginX():获取 Object 的原点 X 值。
String getOriginY():获取 Object 的原点 Y 值。
fabric.Point getPointByOrigin(String, String):如果 Object 有不同的原点,该函数可获得 Object 的原点坐标。第一个参数代表 originX,可选值为:"left"、"center"、"right";第二个参数代表 originY,可选值为:"top"、"center"、"bottom"。
Number getScaleX():获取 Object 的 scaleX 属性值。
Number getScaleY():获取 Object 的 scaleY 属性值。
String getSelectedText():选回选中文本的内容。
Number getSelectionStartFromPointer(Event):返回对象被点击所在的文字的索引。
Object getSelectionStyles(Number opt, Number opt):返回当前选中块/光标所在处(当光标位于起始位置)的样式。第一个参数为起始索引,第二个参数为结束索引,均为可选参数。
Object getShadow():获取 Object 的阴影,返回阴影实例。(译者注:不清楚为啥文档写的是返回 Object 而不是 fabric.Shadow)。
String getStroke():获取 Object 的 stroke 属性值。
Number getStrokeWidth():获取 Object 的笔划宽度。
String getSvgStyles():获取 svg 输出的样式字符串。
String getSvgTransform():获取 svg 输出的变换字符串。
String getSvgTransformMatrix():从单一元素的变换矩阵中返回 svg 输出的变换字符串。
String getText():获取 Object 包含的文本。
String getTextAlign():获取 Object 文本的对齐方式。
String getTextBackgroundColor():获取 Object 的 textBackgroundColor 属性值。
String getTextDecoration():获取 Object 文本修饰值。
Number getTop():获得 Object 的顶部位置,即 Y 坐标,以像素为单位。
Array getTransformMatrix():获得 Object 的变换矩阵,即 transformMatrix 属性值。
Number getUpCursorOffset(Event, Boolean):(译者注:该函数没有任何注解,但以 getDownCursorOffset 猜测,很可能是获取选中块的终止偏移量)。第一个参数为事件对象,第二个参数指明是否从右边开始选中。
boolean getViewportTransform():在可能的情况下,获取 Object 的视口变换。(译者注:源码中返回的是数组,不知道为啥文档中写的是返回 boolean)。
boolean getVisible():获取 Object 是否可见。
Number getWidth():获取 Object 的宽度。
boolean hasStateChanged():当任一个 Object 的状态属性发生变化是,该函数返回 true。
void initAddedHandler():初始化"added"的事件句柄。
void initBehavior():初始化 IText 所有的交互行为。
void initClicks():初始化双击和三击的事件句柄。
void initCursorSelectionHandler():初始化与光标或文本选中相关的事件处理句柄。
void initDelayedCursor():初始化延迟光标。
void initHiddenTextarea():初始化隐藏文本域(需要在 IOS 中弹出键盘)。
fabric.IText initialize(String, Object):构造函数,第一个参数为需要显示的文本,第二参数是要初始化的属性值。
void initMousedownHandler():初始化鼠标向下按的事件句柄。
void initMouseupHandler():初始化鼠标弹起事件句柄。
void initSelectedHandler():初始化选中文本事件句柄。
void insertChars(String):在光标处插入一个字符,如果有选中块则替换掉选中的内容。
void insertCharStyleObject(Number, Number , Object opt):为给定的行号/字号指定的文字添加样式对象。第一个参数为行索引;第二个参数为字索引;第三个参数可选,即为样式对象。
void insertNewline():插入一个新行。
void insertNewlineStyleObject(Number, Number, Boolean):插入新的要式对象。第一个参数为行索引;第二个参数为字索引;第三个参数为 true 时则标明为该行末尾。
void insertStyleObjects(String, Boolean, Array opt):插入一个或多个样式对象。第一个参数为插入样式的文字;第二个参数为 true 时标识该行末尾;第三个参数可选,为想要插入的一个或多个样式数组。
boolean intersectsWithObject(fabric.Object):探测该 Object 是否与指定的 Object 有交集。
boolean intersectsWithRect(Object, Object):探测该 Object 是否与指定的矩型有交集。第一个参数是矩形左上角的点;第二个参数是矩形右上角的点。
boolean isContainedWithinObject(fabric.Object):探测该 Object 是否完全包含在另一个指定的 Object 中。
boolean isContainedWithinRect(Object, Object):探测该 Object 是否完全包含在指定的矩形中。第一个参数是矩形左上角的点;第二个参数是矩形右上角的点。
boolean isControlVisible(String):当指定的控制器可见是返回 true,否测返回 false。参数为控制器的名称,可选值有:"tl"、"tr"、"bl"、"br"、"ml"、"mt"、"mr"、"mb"、"mtr"。
boolean isEmptyStyles():如果没有样式应用则返回 true。
boolean isType(String):指定的类型和当前 Object 类型相同时,则返回 true。
void moveCursorDown(Event):使光标向下移动。
void moveCursorDownWithoutShift(Number):使光标向下移动,但不保持选中状态。
void moveCursorDownWithShift(Number):使光标向下移动,并且保持选中状态。
void moveCursorLeft(Event):使光标向左移动。
void moveCursorLeftWithoutShift(Event):使光标向左移动,但不保持选中状态。
void moveCursorLeftWithShift(Event):使光标向左移动,并且保持选中状态。
void moveCursorRight(Event):使光标向右移动。
void moveCursorRightWithoutShift(Event):使光标向右移动,但不保持选中状态。
void moveCursorRightWithShift(Event):使光标向右移动,并且保持选中状态。
void moveCursorUp(Event):使光标向上移动。
void moveCursorUpWithoutShift(Number):使光标向上移动,但不保持选中状态。
void moveCursorUpWithShift(Number):使光标向上移动,并且保持选中状态。
fabric.Object moveTo(Number):将 Object 移至绘制栈的指定层。
void onKeyDown(Event):处理按键 Down 事件。
void onKeyPress(Event):处理按键 Press 事件。
void paste(Event):粘贴文本。
fabric.Object remove():将 Object 从 Canvas 上移除。
void removeChars(Event):移除光标所在处的文字。
void removeStyleObject(Boolean, Number opt):移除样式对象。第一个参数为 true 时,则说明为该行行首;第二个参数可选,如果无指定则以当前选中块的起始位置为准。
render(CanvasRenderingContext2D, boolean opt):在指定的 Context 上渲染 Object。第一个参数是将要渲染的 Object;第二个参数为 true 时,Context 将不会进行变换。
void renderCursor(Object):渲染光标。参数即为指定演染的边界,从源码中可得知该 Object 有 left、top、leftOffset、topOffset 成员。
void renderCursorOrSelection():渲染光标或选中的文本块,取决于哪个当前存在。
void renderSelection(Array, Object):渲染选中的文本块。第一个参数为字符数组;第二个参数为渲染的边界,该 Object 有 left、top、leftOffset、topOffset 成员。
fabric.Object saveState(Object opt):保存 Object 的状态。参数是一个 Object,当状态保存过程中需要额外添加到 Object 中的状态属性。
fabric.Object scale(Number):缩放 Object,X 和 Y 轴方向上等值。参数即是缩放因子。
fabric.Object scaleToHeight(Number):将 Object 的高度缩放到指定值。考虑到盒模型,最好是使用 scale 进行 x、y 轴等比缩放。
fabric.Object scaleToWidth(Number):将 Object 的宽度缩放到指定值。考虑到盒模型,最好是使用 scale 进行 x、y 轴等比缩放。
Number searchWordBoundary(Number, Number):检索对应于一个词的开始或结束的位置。第一个参数为指定字的索引;第二个参数可选值为-1 或 1。
void selectAll():选中所有文本。
void selectLine(Number):基于给定的索引,选中该行。参数为给定的文字索引。
void selectWord(Number):基于给定的索引,选中该词。参数为给定的文字索引。
fabric.Object sendBackwards(boolean):将 Object 在绘制栈中向下移一层。当参数为 true 时,将 Object 移到下一个与之相交的 Object 之后。
fabric.Object sendToBack():将 Object 移至绘制栈的最底部。
fabric.Object set(String | Object, Object | Function):为指定的属性设置值。当设置位置或维度(与 left、top、scale、angle 等相关联)的属性时,set 函数 Object 的边框和控制器的位置。如果你要将它们也进行更新,需要调用 setCoord() 函数。第一个参数指定属性名或 Object,为 Object 时函数将会遍历该 Object 的键值对;第二个参数指定属性值或 Function,为 Function 时属性值将会作为参数传放,并返回一个新值。
fabric.Object setAngle(Number):设置 Object 的角度,以“度”为单位。
fabric.Object setClipTo(Function):设置 Object 的裁剪函数,即 clipTo 属性。
fabric.Object setColor(String):设置实例的颜色(Color 是 fill 属性的别名)。
fabric.Object setControlsVisibility(Object opt):设置 fabric.Object 控制器的显示/隐藏状态。参数是一个要选的 Object,可选成员如下所示:
bl: boolean 类型,为 true 则 bottom-left 控制器可用,false 则不可用。
br: boolean 类型,为 true 则 bottom-right 控制器可用,false 则不可用。
mb: boolean 类型,为 true 则 middle-bottom 控制器可用,false 则不可用。
ml: boolean 类型,为 true 则 middle-left 控制器可用,false 则不可用。
mr: boolean 类型,为 true 则 middle-right 控制器可用,false 则不可用。
mt: boolean 类型,为 true 则 middle-top 控制器可用,false 则不可用。
tl: boolean 类型,为 true 则 top-left 控制器可用,false 则不可用。
tr: boolean 类型,为 true 则 top-right 控制器可用,false 则不可用。
mtr: boolean 类型,为 true 则 middle-top-rotate 控制器可用,false 则不可用。
fabric.Object setControlVisible(String, boolean):设置指定的控制器显示/隐藏状态。第一个参数是指定的控制器名,可选值有'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr';第二个参数为 true 则指定的控制器可用,否则不可用。
fabric.Object setCoords():以当前的角度、宽高为基准,设置四角的的位置。可参考: https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords。
void setCursorByClick(Event):根据传递的鼠标位置(x/y)来重新设置光标的位置。
fabric.Object setFill(String):设置 Object 的填充颜色。参数示例:rgb(0,0,0)。
fabric.Object setFlipX(boolean):设置 Object 的 flipX 属性值。
fabric.Object setFlipY(boolean):设置 Object 的 flipY 属性值。
fabric.Text setFontFamily(String):设置字体。
fabric.Text setFontSize(Number):设置字号,以像素为单位。
fabric.Text setFontStyle(String):设置文字样式。
fabric.Text setFontWeight(Number | String):设置文字粗细。
fabric.Object setGradient(String, Object):设置(填充或画笔)的渐变色。无法向后兼容提示:在 v1.1.0 之前,该函数被命名为 setGradientFill。第一个参数可选值为"stroke"或"fill";第二个参数为 Object,可选属性如下:
属性名 | 类型 | 是否可选 | 默认值 | 说明 |
---|---|---|---|---|
type | String | 是 | 渐变类型,"linear"或"radial" | |
x1 | Number | 是 | 0 | 起始点 x 坐标 |
y1 | Number | 是 | 0 | 起始点 y 坐标 |
x2 | Number | 是 | 0 | 终点 x 坐标 |
y2 | Number | 是 | 0 | 终点 y 坐标 |
r1 | Number | 是 | 0 | 起始点半径(仅在径向渐变时生效) |
r2 | Number | 是 | 0 | 终止点半径(仅在径向渐变时生效) |
colorStops | Object | 是 | 终止色,示例: {0: 'ff0000', 1: '000000'} |
示例 1:
object.setGradient('fill', {
type: 'linear',
x1: -object.width / 2,
y1: 0,
x2: object.width / 2,
y2: 0,
colorStops: {
0: 'red',
0.5: '#005555',
1: 'rgba(0,0,255,0.5)'
}
});
canvas.renderAll();
示例 2:
object.setGradient('fill', {
type: 'radial',
x1: 0,
y1: 0,
x2: 0,
y2: 0,
r1: object.width / 2,
r2: 10,
colorStops: {
0: 'red',
0.5: '#005555',
1: 'rgba(0,0,255,0.5)'
}
});
canvas.renderAll();
fabric.Object setLeft(Number):设置 Object 的左边距,以像素为单位。
fabric.Text setLineHeight(Number):设置行高。
fabric.Object setOpacity(Number):设置 Object 的透明度,参数范围[0-1]。
void setOptions(Object opt):通过参数设置 Object 的属性。
fabric.Object setOriginX(String):设置 originX 属性值,可选值为:"left", "right", "center"。
fabric.Object setOriginY(String):设置 originY 属性值,可选值为:"top", "bottom", "center"。
fabric.Object setPatternFill(Object):设置 Object 的样式填充。参数的可选成员如下:
参数名 | 类型 | 是否可选 | 默认值 | 说明 |
---|---|---|---|---|
source | String | HTMLImageElement | 样式来源 | |
repeat | String | 是 | "repeat" | 指定是否重复样式填充,可选值有:"repeat"、"repeat-x"、"repeat-y"、"no-repeat" |
offsetX | Number | 是 | 0 | 相对于左上角的水平偏移量 |
offsetY | Number | 是 | 0 | 相对于右上角的垂直偏移量 |
示例:
fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function(img) {
object.setPatternFill({
source: img,
repeat: 'repeat'
});
canvas.renderAll();
});
void setPositionByOrigin(fabric.Point, String, String):根据 Object 的原点设置 Object 的值置。第一个参数指定的 Object 的新位置;第二个参数指定 Object 的水平原点,可选值有:'left', 'center' or 'right';第三个参数指定 Object 的垂直原点,可选值有:'top', 'center' or 'bottom'。
fabric.Object setScaleX(Number):设置 Object 的 scaleX 属性值。
fabric.Object setScaleY(Number):设置 Object 的 scaleY 属性值。
void setSelectionEnd(Number):设置选中文本块的结束位置(即为选中块的右边界)。参数为指定的结束位置。
void setSelectionStart(Number):设置选中文本块的起始位置(即为块中块的左边界)。参数为指定的起始位置。
fabric.IText setSelectionStyles(Object opt):设置当前选中文本块的样式。
fabric.Object setShadow(Object | String opt):设置 Object 的阴影。当参数为 String 类型时,可以如下格式设置:"2px 2px 10px rgba(0,0,0,0.2)";当参数为 Object 类型时,可选成员如下:
属性名 | 类型 | 是否可选 | 默认值 | 说明 |
---|---|---|---|---|
color | String | 是 | rgb(0,0,0) | 阴影颜色 |
blur | Number | 是 | 0 | 阴影模糊度 |
offsetX | Number | 是 | 0 | 水平偏移量 |
offsetY | Number | 是 | 0 | 垂直偏移量 |
示例 1:
object.setShadow('2px 2px 10px rgba(0,0,0,0.2)');
canvas.renderAll();
示例 2:
object.setShadow({
color: 'red',
blur: 10,
offsetX: 20,
offsetY: 20
});
canvas.renderAll();
fabric.Object setSourcePath(String):设置 Object 的源路径。译者注:不清楚这里的 source path 是指啥。参数即为要设置的 sourcePath 属性值。
fabric.Object setStroke(String):设置 Object 的画笔。
fabric.Object setStrokeWidth(Number):设置 Object 的画笔宽度。
fabric.Text setText(String):设置文字。
fabric.Text setTextAlign(String):设置文字对齐方式。
fabric.Text setTextBackground(String):设置文字背景色。
fabric.Text setTextDecoration(String):设置文字修饰。
fabric.Object setTop(Number):设置 Object 的 top 属性,以像素为单位。
fabric.Object setTransformMatrix(Array):设置 Object 的 transformMatrix 属性。
fabric.Object setupState():建立 Object 的状态。
fabric.Object setVisible(boolean):设置 Object 的 visible 属性。
void shiftLineStyles(Number, Number):向上或向下转换行样式。第一个参数为行索引;第二个参数可选值为-1 或 1。
fabric.Object straighten():拉直 Object(将 Object 从前当角度旋转到 0、90、180、270 度,取决于哪个角度比较靠近)。
void swapSelectionPoints():私有函数,无任何说明。
Object toDatalessObject(Array opt):返回代表该实例的无数据 Object。参数可选,该数组可指定任意你想添加到输出的属性。
String ToDataURL(Object):将 Object 转换成类 URL 的字符串。参数可选成员如下:
属性名 | 类型 | 是否可选 | 默认值 | 说明 |
---|---|---|---|---|
format | String | 是 | png | 输出图片的格式,可选"jpeg"或"png" |
quality | Number | 是 | 1 | 输出图片质量,[0-1],jpeg 格式生效 |
multiplier | Number | 是 | 1 | 缩放因子 |
left | Number | 是 | 裁剪区域左偏移量,v1.2.14 引入 | |
top | Number | 是 | 裁剪区域顶部偏移量,v1.2.14 引入 | |
width | Number | 是 | 裁剪区域宽度,v1.2.14 引入 | |
height | Number | 是 | 裁剪区域高度,v1.2.14 引入 |
fabric.Object toggle(String):切换指定的属性,true 变为 false,false 变为 true。
Object toJSON(Array opt):返回一个代表当前实例的 JSON 对象。参数可选,该数组可指定任意你想添加到输出的属性。
fabric.Point toLocalPoint(fabric.Point, originX, originY):返回指定的点在当前 Object 的本地坐标。第一个参数指定一个需要转换的全局坐标;第二个参数指定了水平原点,可选值有'left', 'center' or 'right';第三个参数指定了垂直原点,可选值有'top', 'center' or 'bottom'。
Object toObject(Array opt):返回一个代表当前实例的 Object 对象。参数可选,该数组可指定任意你想添加到输出的属性。
String toString():返回一个代表当前实例的字符串。
String toSVG(Function opt):返回代表当前实例的 SVG 字符串。参数是一个可选的回调函数,用于更进一步转换 SVG 对象。
void transform(CanvasRenderingContext2D, boolean):当渲染 Object 时对 Context 进行变换。当第二个参数为 true 时,context 被变换到 Object 的左上角,这个用在渲染文本的时候。
fabric.Point translateToCenterPoint(fabric.Point, String, String):将指定的坐标点从原点平移到中点坐标(基于 Object 的维度)。第一个参数的 X/Y 坐标分别对应第二和第三个参数;第二个参数即水平原点,可选值为'left', 'center' or 'right';第三个参数即垂直原点,可选值为'top', 'center' or 'bottom'。
fabric.Point translateToOriginPoint(fabric.Point, String, String):将指定的坐标点从中点坐标平移到原点(基于 Object 的维度)。第一个参数的 X/Y 坐标分别对应第二和第三个参数;第二个参数即水平原点,可选值为'left', 'center' or 'right';第三个参数即垂直原点,可选值为'top', 'center' or 'bottom'。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论