fabric.Canvas-程序员宅基地

技术标签: fabric.js  fabric  javascript  css3  

fabric.Canvas

new Canvas()

Canvas class

源码: fabric.js, line 11253
教程: http://fabricjs.com/fabric-intro-part-1#canvas

触发 事件说明
object:modified statefull=true,在转换结束时或任何改变结束后
object:rotating 当对象被旋转时
object:scaling 当对象被缩放时
object:moving 当对象被移动时
object:skewing 当对象被歪斜时
before:transform 改变之前
before:selection:cleared 选中被清除之前
selection:cleared 选中清理后
selection:updated 选中更新
selection:created 选中
path:created path对象被创建之后
mouse:down 鼠标按键按下
mouse:move 鼠标移动
mouse:up 鼠标按键松开
mouse:down:before 在鼠标按键按下之前,事件:在内部织物逻辑运行之前
mouse:move:before 在鼠标移动之前,事件:在内部织物逻辑运行之前
mouse:up:before 在鼠标按键松开之前,事件:在内部织物逻辑运行之前
mouse:over 鼠标移入
mouse:out 鼠标移出
mouse:dblclick 鼠标双击
event:dragover 拖动经过
event:dragenter 拖动进入
event:dragleave 拖动移出
event:drop 拖动释放
after:render 在渲染过程结束时,事件:在回调中接收上下文
before:render 在渲染过程开始时,在回调中接收上下文

下事件已被弃用:
object:rotated 旋转结束
object:scaled 缩放结束
object:moved 移动结束
object:skewed 歪斜结束

扩展

fabric.StaticCanvas

属性

  • allowTouchScrolling :Boolean
    表示使用触摸屏并在画布上拖动时,浏览器是否可以滚动。
    类型:Boolean
    继承: fabric.StaticCanvas#allowTouchScrolling
    源码: fabric.js, line 8647

  • altActionKey :String
    表示哪个键可以alt操作。altKey, shiftKey, ctrlKey. 如果nullnone或任何其他字符串,则禁用功能。
    类型:String
    起始版本:1.6.2
    默认值: shiftKey
    源码:fabric.js, line 11374

  • altSelectionKey :null|String
    表示在目标与活动对象值重叠的情况下,哪个键可以启用替代选择。altKey, shiftKey, ctrlKey. 这个功能只对保留对象堆叠preserveObjectStacking为真时有效。如果nullnone或任何其他字符串被禁用。
    类型:null | String
    起始版本:1.6.5
    源码:fabric.js, line 11414

  • backgroundColor :String|fabric.Pattern
    画布背景颜色
    类型:String | fabric.Pattern
    继承:fabric.StaticCanvas#backgroundColor
    源码:fabric.js, line 8577

  • backgroundImage :fabric.Image
    画布实例的背景图像。由于v2.4.0的图像缓存是有效的,当把图像作为背景时,请在画布属性中添加它所在画布的引用。否则,图像无法检测到变焦的程度。解决方案:你可以禁用图像对象缓存
    类型:fabric.Image
    继承:fabric.StaticCanvas#backgroundImage
    源码:fabric.js, line 8587

  • backgroundVpt :Boolean
    如果设置为false,则背景图像不受视口转换的影响。
    类型:Boolean
    起始版本:1.6.3
    继承:fabric.StaticCanvas#backgroundVpt
    默认值:true
    源码:fabric.js, line 8669

  • centeredKey :String
    表示哪个键启用居中的变换值。altKey, shiftKey, ctrlKey. 如果nullnone或任何字符串表示禁用。
    类型:String
    起始版本:1.6.2
    默认值:altKey
    源码:fabric.js, line 11363

  • centeredRotation :Boolean
    当为真时,对象使用中心点作为旋转变换的原点。该属性取代了 “centerTransform”(布尔值)
    类型:Boolean
    起始版本:1.3.4
    源码:fabric.js, line 11352

  • centeredScaling :Boolean
    当为真时,对象使用中心点作为比例变换的原点。该属性取代了 “centerTransform”(布尔值)
    类型:Boolean
    起始版本:1.3.4
    源码:fabric.js, line 11343

  • clipPath :fabric.Object
    clipPath对象在画布渲染时被使用,并且上下文被放置在画布的左上角。 clipPath会夹走控件,如果你不希望发生这种情况,请设置controlsAboveOverlay = true
    类型:fabric.Object
    继承:fabric.StaticCanvas#clipPath
    源码:fabric.js, line 8716

  • containerClass :String
    给予canvas的包装(div)元素的默认class值。
    类型:String
    默认值:canvas-container
    源码:fabric.js, line 11499

  • controlsAboveOverlay :Boolean
    指示对象控制(边框/控制)是否在覆盖图像上方渲染。
    类型:Boolean
    继承:fabric.StaticCanvas#controlsAboveOverlay
    源码:fabric.js, line 8640

  • defaultCursor :String
    用于整个画布的默认游标值
    类型:String
    默认值:default
    源码:fabric.js, line 11470

  • enableRetinaScaling :Boolean
    当为真时,画布按devicePixelRatio缩放,以便在视网膜屏幕上更好地呈现。
    类型:Boolean
    继承:fabric.StaticCanvas#enableRetinaScaling
    默认值:true
    源码:fabric.js, line 8684

  • fireMiddleClick :Boolean
    指示画布是否可以触发鼠标滚轮点击事件
    类型:Boolean
    起始版本:1.7.8
    源码:fabric.js, line 11583

  • fireRightClick :Boolean
    画布是否支持鼠标右键点击事件
    类型:Boolean
    起始版本:1.6.5
    源码:fabric.js, line 11575

  • freeDrawingCursor :String
    画布是否支持画笔涂鸦
    类型:String
    默认值:crosshair
    源码:fabric.js, line 11477

  • FX_DURATION :Number
    fx*方法的动画持续时间(以ms为单位)。
    类型:Number
    继承:fabric.StaticCanvas#FX_DURATION
    默认值:500
    源码:fabric.js, line 17813

  • hoverCursor :String
    悬停在画布上的物体上时使用的默认光标值
    类型:String
    默认值:move
    源码:fabric.js, line 11456

  • imageSmoothingEnabled :Boolean
    表示该画布是否使用图像平滑,在浏览器中默认为打开。
    类型:Boolean
    继承:fabric.StaticCanvas#imageSmoothingEnabled
    默认值:true
    源码:fabric.js, line 8654

  • includeDefaultValues :Boolean
    指示toObject/toDatalessObject是否应该包括默认值,如果设置为false,则优先于对象值。
    类型:Boolean
    继承:fabric.StaticCanvas#includeDefaultValues
    默认值:true
    源码:fabric.js, line 8614

  • interactive :Boolean
    表示画布是互动的。这个属性不可改变。
    类型:Boolean
    默认值:true
    源码:fabric.js, line 11381

  • isDrawingMode :Boolean
    如果为真,画布上的鼠标事件(mousedown/mousemove/mouseup)会导致自由绘制。在mousedown之后,mousemove创建了一个形状,然后mouseup最终确定它,并在canvas上添加一个fabric.Path的实例。
    类型:Boolean
    源码:fabric.js, line 11534
    教程: http://fabricjs.com/fabric-intro-part-4#free_drawing

  • moveCursor :String
    在画布上移动一个物体时使用的默认光标值
    类型:String
    默认值:move
    源码:fabric.js, line 11463

  • notAllowedCursor :String
    用于禁用元素的光标值(带有禁用动作的角)。
    类型:String
    起始版本:2.0.0
    默认值:not-allowed
    源码:fabric.js, line 11492

  • overlayColor :String|fabric.Pattern
    画布实例的覆盖颜色。应该通过 fabric.StaticCanvas#setOverlayColor 来设置。
    类型:String | fabric.Pattern
    起始版本:1.3.9
    继承:fabric.StaticCanvas#overlayColor
    源码:fabric.js, line 8596

  • overlayImage :fabric.Image
    画布实例的叠加图像。自从2.4.0图像缓存激活后,当把图像作为叠加时,请在画布属性中添加它所在画布的引用。否则,图像无法检测到变焦的程度。解决方案:你可以禁用图像对象缓存
    类型:fabric.Image
    继承:fabric.StaticCanvas#overlayImage
    源码:fabric.js, line 8606

  • overlayVpt :Boolean
    如果设置为false,则图像不受视口转换的影响。
    类型:Boolean
    起始版本:1.6.3
    继承:fabric.StaticCanvas#overlayVpt
    默认值:true
    源码:fabric.js, line 8677

  • perPixelTargetFind :Boolean
    当为真时,物体检测是在每个像素的基础上进行的,而不是在每个边框的基础上。
    类型:Boolean
    源码:fabric.js, line 11506

  • preserveObjectStacking :Boolean
    指示对象在被选择时是否应该保持在当前的堆栈位置。当false,对象会被带到顶部并作为选择组的一部分被渲染。
    类型:Boolean
    源码:fabric.js, line 11542

  • renderOnAddRemove :Boolean
    指示 fabric.Collection.add, fabric.Collection.insertAt 和 fabric.Collection.remove, fabric.StaticCanvas.moveTo, fabric.StaticCanvas.clear 以及更多,是否也应该重新渲染画布。当一次向画布添加/删除大量对象时,禁用该选项不会带来性能提升,因为渲染是排队的,每帧执行一次。建议禁用该选项,手动管理应用程序的渲染并不费力 ( canvas.requestRenderAll() ) 将默认值设为true,以避免破坏文档和旧的应用程序,乱来。
    类型:Boolean
    继承:fabric.StaticCanvas#renderOnAddRemove
    默认值:true
    源码:fabric.js, line 8633

  • rotationCursor :String
    旋转时鼠标样式
    类型:String
    默认值:crosshair
    源码:fabric.js, line 11484

  • selection :Boolean
    表示是否应启用组别选择
    类型:Boolean
    默认值:true
    源码:fabric.js, line 11388

  • selectionBorderColor :String
    选区边界的颜色(通常比选区本身的颜色略深)。
    类型:String
    默认值:rgba(255, 255, 255, 0.3)
    源码:fabric.js, line 11435

  • selectionColor :String
    选区的颜色
    类型:String
    默认值:rgba(100, 100, 255, 0.3)
    源码:fabric.js, line 11421

  • selectionDashArray :Array
    选区虚线边框
    类型:Array
    源码:fabric.js, line 11428

  • selectionFullyContained :Boolean
    只选择完全包含在拖动的选择矩形中的形状。
    类型:Boolean
    源码:fabric.js, line 11449

  • selectionKey :String|Array
    指示哪个键或哪些键可以实现多次点击选择,将值作为字符串或字符串数组的值。altKey, shiftKey, ctrlKey
    类型:String | Array
    起始版本:1.6.2
    默认值:shiftKey
    源码:fabric.js, line 11400

  • selectionLineWidth :Number
    在对象/组选择中使用的线的宽度
    类型:Number
    默认值:1
    源码:fabric.js, line 11442

  • skipOffscreen :Boolean
    基于vptCoords和object.aCoords,跳过渲染那些不在当前视口中的物体。在画布拥挤和使用缩放/平移的情况下,可能会有很大的帮助,如果对象的边界框的一个角在画布上,对象会被渲染。
    类型:Boolean
    继承:fabric.StaticCanvas#skipOffscreen
    默认值:true
    源码:fabric.js, line 8707

  • skipTargetFind :Boolean
    当为真时,目标检测被跳过。目标检测将始终返回未定义。点击选择将不再起作用,事件将在没有目标的情况下发生。如果在将其设置为 "真 "之前已经选择了某些东西,它将在第一次点击时被取消选择。
    类型:Boolean
    源码:fabric.js, line 11524

  • snapAngle :Number
    表示一个物体在旋转时将锁定的角度。
    类型:Number
    起始版本:1.6.7
    源码:fabric.js, line 11550

  • snapThreshold :null|Number
    表示旋转将锁定在snapAngle上的距离。当 "null"时,sapThreshold将默认为sapAngle。
    类型:null | Number
    起始版本:1.6.7
    源码:fabric.js, line 11559

  • stateful :Boolean
    表明对象的状态是否应该被保存
    类型:Boolean
    继承:fabric.StaticCanvas#stateful
    源码:fabric.js, line 8621

  • stopContextMenu :Boolean
    表示在画布上右击是否可以输出上下文菜单。
    类型:Boolean
    起始版本:1.6.5
    源码:fabric.js, line 11567

  • svgViewportTransformation :Boolean
    当为真时,getSvgTransform()将把StaticCanvas.viewportTransform应用于SVG转换。当为真时,一个缩放的画布就会产生缩放的SVG输出。
    类型:Boolean
    继承:fabric.StaticCanvas#svgViewportTransformation
    默认值:true
    源码:fabric.js, line 9764

  • targetFindTolerance :Number
    目标像素周围的像素数量,在物体检测过程中容忍(考虑活动)。
    类型:Number
    源码:fabric.js, line 11513

  • targets :Array.<fabric.Object>
    追踪鼠标事件的子目标
    类型:Array.<fabric.Object>
    源码:fabric.js, line 11589

  • uniformScaling :Boolean
    当为真时,对象在角上拖动时,可以转变一边(不按比例),通常不会这样做。
    类型:Boolean
    起始版本:fabric 4.0 // changed name and default value
    默认值:true
    源码:fabric.js, line 11320

  • uniScaleKey :String
    表示哪个键可以切换统一缩放。‘altKey’, ‘shiftKey’, ‘ctrlKey’. 如果Canvas.uniformScaling为真,按这个会将其设置为假,反之亦然。
    类型:String
    起始版本:1.6.2
    默认值:shiftKey
    源码:fabric.js, line 11334

  • viewportTransform :Array
    聚焦视口的变换(以Canvas变换的格式)
    类型:Array
    继承:fabric.StaticCanvas#viewportTransform
    源码:fabric.js, line 8661

  • vptCoords
    如果画布没有被缩放/平移,这些点就是画布的四个角,如果画布被视口转换,这些点就表示画布元素在普通的未变形的坐标中的延伸。
    继承:fabric.StaticCanvas#vptCoords
    源码:fabric.js, line 8695

方法

__onMouseWheel(e)

定义当事件鼠标滚轮发生时的动作的方法

  • 参数:

    Name Type Description
    e Event Event object fired on mouseup
  • 源码:fabric.js, line 13478

_chooseObjectsToRender() → {Array}

将对象分成两组,一组立即渲染,一组作为activeGroup渲染。

  • 源码:fabric.js, line 11627

  • 返回:Array
    对象立即渲染,并将其他对象推到活动组中。

_setCursorFromEvent(e, target)

根据画布被悬停的位置来设置光标。注意:在Opera中非常有问题

  • 传参:
Name Type Description
e Event Event object
target Object Object that the mouse is hovering, if so.
  • 源码:fabric.js, line 13533

absolutePan(point) → {fabric.Canvas}

平移视口,以便将点放在画布的左上角

  • 传参:
Name Type Description
point fabric.Point to move to
  • 继承:fabric.StaticCanvas#absolutePan
  • 源码:fabric.js, line 9262
  • 返回:fabric.Canvas
    画布实例

add(…object) → {Self}

向集合、Canvas或Group添加对象,然后渲染canvas(如果renderOnAddRemove不是false的话)。对于Group来说,不会对边界框进行修改。对象应该是fabric.Object的实例(或继承自fabric.Object)。你可以用add方法添加一堆对象,但你必须为Group类运行addWithUpdate调用,否则位置/框会出错。

  • 传参:
Name Type Attributes Description
object fabric.Object repeatable Zero or more fabric instances
  • 继承:fabric.StaticCanvas#add
  • 混入:fabric.Collection.add
  • 源码:fabric.js, line 375
  • 返回: self

bringForward(object, intersectingopt) → {fabric.Canvas}

将一个对象或一个选区在绘制的对象堆栈中向上移动。一个可选的参数,相交允许将对象移动到第一个相交的对象前面。交叉点是通过边界盒计算的。如果没有找到相交点,堆栈中就不会有变化。

  • 传参:
Name Type Attributes Description
object fabric.Object Object to send
intersecting Boolean optional If true, send object in front of next upper intersecting object
  • 继承:fabric.StaticCanvas#bringForward
  • 源码:fabric.js, line 10194
  • 返回:fabric.Canvas

bringToFront(object) → {fabric.Canvas}

将一个对象或多个选择的对象移动到绘制对象堆栈的顶部

  • 传参:
Name Type Description
object fabric.Object Object to send
  • 继承:fabric.StaticCanvas#bringToFront
  • 源码:fabric.js, line 10088
  • 返回:fabric.Canvas

calcOffset() → {fabric.Canvas}

计算画布元素相对于文档的偏移量,该方法也作为窗口的 "调整大小 "事件处理程序。

  • 继承:fabric.StaticCanvas#calcOffset
  • 源码:fabric.js, line 8790
  • 返回:fabric.Canvas

calcViewportBoundaries() → {Object}

用当前的viewportTransform计算画布的4个角的位置,有助于使用对象的绝对坐标(aCoords)确定对象何时在当前的渲染视口中。

  • 继承:fabric.StaticCanvas#calcViewportBoundaries
  • 源码:fabric.js, line 9400
  • 返回: points.tl

centerObject(object) → {fabric.Canvas}

将对象在画布中垂直和水平居中

  • 传参:
Name Type Description
object fabric.Object Object to center vertically and horizontally
  • 继承:fabric.StaticCanvas#centerObject
  • 源码:fabric.js, line 9580
  • 返回:fabric.Canvas
    centerObjectH(object) → {fabric.Canvas}
    Centers object horizontally in the canvas
  • 传参:
Name Type Description
object fabric.Object Object to center horizontally
  • 继承:fabric.StaticCanvas#centerObjectH
  • 源码:fabric.js, line 9560
  • 返回:fabric.Canvas
    centerObjectV(object) → {fabric.Canvas}
    Centers object vertically in the canvas
  • 传参:
Name Type Description
object fabric.Object Object to center vertically
  • 继承:fabric.StaticCanvas#centerObjectV
  • 源码:fabric.js, line 9570
  • 返回:fabric.Canvas

clear() → {fabric.Canvas}

清除一个画布实例的所有内容。

  • 重写:fabric.StaticCanvas#clear
  • 源码:fabric.js, line 12464
  • 返回:fabric.Canvas

clearContext(ctx) → {fabric.Canvas}

清除画布元素的指定上下文

  • 传参:
Name Type Description
ctx CanvasRenderingContext2D Context to clear
  • 继承:fabric.StaticCanvas#clearContext
  • 源码:fabric.js, line 9318
  • 返回:fabric.Canvas

clone(callbackopt, propertiesopt)

克隆画布实例

  • 传参:
Name Type Attributes Description
callback Object optional Receives cloned instance as a first argument
properties Array optional Array of properties to include in the cloned canvas and children

继承:fabric.StaticCanvas#clone
源码:fabric.js, line 14045

cloneWithoutData(callbackopt)

克隆画布实例而不克隆现有数据。这基本上是复制画布的尺寸、剪裁属性等,但保留数据为空(这样你就可以用你自己的数据来填充它)。

  • 传参:
Name Type Attributes Description
callback Object optional Receives cloned instance as a first argument
  • 继承:fabric.StaticCanvas#cloneWithoutData
  • 源码:fabric.js, line 14060

complexity() → {Number}

返回一个集合复杂性的数字表示

  • 继承:fabric.StaticCanvas#complexity
  • 混入:fabric.Collection.complexity
  • 源码:fabric.js, line 519
  • 返回:Number

contains(object, deepopt) → {Boolean}

如果集合包含一个对象,则返回真

  • 传参:
Name Type Attributes Default Description
object Object Object to check against
deep Boolean optional false true to check all descendants, false to check only _objects
  • 继承:fabric.StaticCanvas#contains
  • 混入:fabric.Collection.contains
  • 源码:fabric.js, line 503
  • 返回:true if collection contains an object

createSVGFontFacesMarkup(objects) → {String}

创建包含SVG字样的标记,字样的URL必须由开发人员收集,而不是由 fabricjs从DOM中提取。

  • 传参:
Name Type Description
objects Array Array of fabric objects
  • 继承:fabric.StaticCanvas#createSVGFontFacesMarkup
  • 源码:fabric.js, line 9927
  • 返回:String

createSVGRefElementsMarkup() → {String}

创建包含SVG引用元素的标记,如图案、梯度等。

  • 继承:fabric.StaticCanvas#createSVGRefElementsMarkup
  • 源码:fabric.js, line 9901
  • 返回:String

discardActiveObject(e) → {fabric.Canvas}

丢弃当前活动的对象和事件。如果该函数是作为鼠标事件的结果被fabric调用的,该事件被作为参数传递并被发送到自定义事件的fire函数中。当作为一个方法使用时,e参数没有任何应用。

  • 传参:
Name Type Description
e event

源码:fabric.js, line 12425

  • 返回:fabric.Canvas

dispose() → {fabric.Canvas}

清除一个画布元素并移除所有事件监听器

  • 重写:fabric.StaticCanvas#dispose

  • 源码:fabric.js, line 12440

  • 返回:fabric.Canvas

  • drawClipPathOnCanvas(ctx)

在下部画布上画出缓存的剪辑路径。

  • 传参:
Name Type Description
ctx CanvasRenderingContext2D Context to render on
  • 继承:fabric.StaticCanvas#drawClipPathOnCanvas

  • 源码:fabric.js, line 9461

  • drawControls(ctx)

绘制对象的控件(边框/控件)。

  • 传参:
Name Type Description
ctx CanvasRenderingContext2D Context to render controls on
  • 源码:fabric.js, line 12475

findTarget(e, skipGroup) → {fabric.Object}

确定我们正在点击的对象的方法,skipGroup参数是内部使用的,需要shift+点击动作

  • 传参:
Name Type Description
e Event mouse event
skipGroup Boolean when true, activeGroup is skipped and only objects are traversed through
  • 源码:fabric.js, line 11975
  • 返回:fabric.Object

fire(eventName, optionsopt) → {Self}

用一个可选的选项对象触发事件

  • 传参:
Name Type Attributes Description
eventName String Event name to fire
options Object optional Options object
  • 继承:fabric.StaticCanvas#fire
  • 混入:fabric.Observable.fire
  • 源码:fabric.js, line 323
  • 返回:Self

forEachObject(callback, context) → {Self}

对该组中的每个对象执行给定的函数

  • 传参:
Name Type Description
callback function Callback invoked with current object as first argument, index - as second and an array of all objects - as third. Callback is invoked in a context of Global Object (e.g. window) when no context argument is given
context Object Context (aka thisObject)
  • 继承:fabric.StaticCanvas#forEachObject
  • 混入:fabric.Collection.forEachObject
  • 源码:fabric.js, line 448
  • 返回:Self

fxCenterObjectH(object, callbacksopt) → {fabric.Canvas}

用动画使物体水平居中。

  • 传参:
Name Type Attributes Description
object fabric.Object Object to center
callbacks Object optional Callbacks object with optional “onComplete” and/or “onChange” properties

回调属性:

Name Type Attributes Description
onComplete function optional Invoked on completion
onChange function optional Invoked on every step of animation
  • 继承:fabric.StaticCanvas#fxCenterObjectH
  • 源码:fabric.js, line 17824
  • 返回:fabric.Canvas

fxCenterObjectV(object, callbacksopt) → {fabric.Canvas}

用动画使物体垂直居中。

  • 传参:
Name Type Attributes Description
object fabric.Object Object to center
callbacks Object optional Callbacks object with optional “onComplete” and/or “onChange” properties

回调属性:

Name Type Attributes Description
onComplete function optional Invoked on completion
onChange function optional Invoked on every step of animation
  • 继承:fabric.StaticCanvas#fxCenterObjectV
  • 源码:fabric.js, line 17859
  • 返回:fabric.Canvas

fxRemove(object, callbacksopt) → {fabric.Canvas}

fabric.Canvas#remove相同,但有动画效果

  • 传参:
Name Type Attributes Description
object fabric.Object Object to remove
callbacks Object optional Callbacks object with optional “onComplete” and/or “onChange” properties

回调属性:

Name Type Attributes Description
onComplete function optional Invoked on completion
onChange function optional Invoked on every step of animation
  • 继承:fabric.StaticCanvas#fxRemove
  • 源码:fabric.js, line 17894
  • 返回:fabric.Canvas

fxStraightenObject(object) → {fabric.Canvas}

与 fabric.Canvas.prototype.straightenObject 相同,但有动画效果。

  • 传参:
Name Type Description
object fabric.Object Object to straighten
  • 继承:fabric.StaticCanvas#fxStraightenObject
  • 源码:fabric.js, line 21345
  • 返回:fabric.Canvas

getActiveObject() → {fabric.Object}

获取当前激活对象

  • 源码:fabric.js, line 12262
  • 返回:fabric.Object

getActiveObjects() → {fabric.Object}

获取当前选中的对象数组
源码:fabric.js, line 12270

  • 返回:fabric.Object

getCenter() → {Object}

返回画布中心的坐标。返回的值是一个具有顶部和左侧属性的对象。

  • 继承:fabric.StaticCanvas#getCenter
  • 源码:fabric.js, line 9548
  • 返回: {top:Number,left:Number}

getContext() → {CanvasRenderingContext2D}

返回绘制对象的画布的上下文

  • 继承:fabric.StaticCanvas#getContext
  • 源码:fabric.js, line 9327
  • 返回:CanvasRenderingContext2D

getElement() → {HTMLCanvasElement}

返回与该实例对应的canvas元素

  • 继承:fabric.StaticCanvas#getElement
  • 源码:fabric.js, line 9286
  • 返回:HTMLCanvasElement

getHeight() → {Number}

获取画布高(像素px)

  • 继承:fabric.StaticCanvas#getHeight
  • 源码:fabric.js, line 9067
  • 返回:Number

getObjects(typeopt) → {Array}

返回这个实例的子对象的数组 v1.3.10中引入的类型参数 自v2.3.5以来,该方法总是返回数组的COPY。

  • 传参:
Name Type Attributes Description
type String optional 当指定时,只返回这种类型的对象。译者注:对象类型要用小写名称,例fabric.Textbox 应该设置为 textbox,或者会返回空数组
  • 继承:fabric.StaticCanvas#getObjects
  • 混入:fabric.Collection.getObjects
  • 源码:fabric.js, line 463
  • 返回:Array

getPointer(e, ignoreZoom) → {Object}

返回相对于canvas的指针坐标。ignoreZoom false会返回代表在画布元素上点击的坐标。ignoreZoom true会返回经过viewportTransform处理后的坐标(即你点击的画布上所显示的坐标)。ignoreZoom true = 相对于顶部和左侧的HTMLElement坐标 ignoreZoom false, 默认 = 布局空间坐标,与形状位置使用的坐标相同 要与你的形状顶部和左侧互动,你要在大多数时候使用ignoreZoom true,而ignoreZoom false将给你与object.oCoords系统兼容的坐标。

  • 传参:
Name Type Description
e Event
ignoreZoom Boolean
  • 源码:fabric.js, line 12105
  • 返回: {x:Number,y:Number}

getSelectionContext() → {CanvasRenderingContext2D}

返回选择对象所在的画布的上下文

  • 源码:fabric.js, line 12246
  • 返回:CanvasRenderingContext2D

getSelectionElement() → {HTMLCanvasElement}

返回绘制对象选择的canvas元素

  • 源码:fabric.js, line 12254
  • 返回:HTMLCanvasElement

getVpCenter() → {fabric.Point}

计算画布中对应于实际视口中心的点。

  • 继承:fabric.StaticCanvas#getVpCenter
  • 源码:fabric.js, line 9627
  • 返回:vpCenter, viewport center (fabric.Point)

getWidth() → {Number}

获取画布宽(像素px)

  • 继承:fabric.StaticCanvas#getWidth
  • 源码:fabric.js, line 9059
  • 返回:Number

getZoom() → {Number}

获取画布缩放等级

  • 继承:fabric.StaticCanvas#getZoom
  • 源码:fabric.js, line 9189
  • 返回:Number

initialize(el, optionsopt) → {Object}

构造函数

  • 传参:
Name Type Attributes Description
el HTMLElement String canvas element to initialize instance on
options Object optional Options object
  • 重写:fabric.StaticCanvas#initialize
  • 源码:fabric.js, line 11304
  • 返回:Object

insertAt(object, index, nonSplicing) → {Self}

在指定的索引处向集合中插入一个对象,然后渲染画布(如果renderOnAddRemove不是false的话)一个对象应该是fabric.Object的实例(或继承自fabric.Object),对于组来说,非常不建议使用这个函数。你可以用insertAt方法添加一堆对象,但是你必须为组类运行addWithUpdate调用,否则position/bub会出错。

  • 传参:
Name Type Description
object Object Object to insert
index Number Index to insert object at
nonSplicing Boolean When true, no splicing (shifting) of objects occurs
  • 继承:fabric.StaticCanvas#insertAt
  • 混入:fabric.Collection.insertAt
  • 源码:fabric.js, line 398
  • 返回:Self

isEmpty() → {Boolean}

判断画布是否为空画布

  • 继承:fabric.StaticCanvas#isEmpty
  • 混入:fabric.Collection.isEmpty
  • 源码:fabric.js, line 485
  • 返回:Boolean

isTargetTransparent(target, x, y) → {Boolean}

如果对象在某一位置是透明的,则返回真。

  • 传参:
Name Type Description
target fabric.Object Object to check
x Number Left coordinate
y Number Top coordinate
  • 源码:fabric.js, line 11717
  • 返回:Boolean

item(index) → {Self}

返回指定索引处的对象

  • 传参:
Name Type Description
index Number
  • 继承:fabric.StaticCanvas#item
  • 混入:fabric.Collection.item
  • 源码:fabric.js, line 477
  • 返回:Self

loadFromJSON(json, callback, reviveropt) → {fabric.Canvas}

用指定的JSON数据来填充画布。JSON格式必须符合 fabric.Canvas#toJSON 的格式。

  • 传参:
Name Type Attributes Description
json String Object JSON string or object
callback function Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized
reviver function optional Method for further parsing of JSON elements, called after each fabric object created.
  • 继承:fabric.StaticCanvas#loadFromJSON
  • 源码:fabric.js, line 13874
  • 教程: http://fabricjs.com/fabric-intro-part-3#deserialization
  • 返回:fabric.Canvas
  • 示例
    loadFromJSON
    canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
    loadFromJSON with reviver
    
    canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
          
    // `o` = json object
    // `object` = fabric.Object instance
    // ... do some stuff ...
    });
    

moveTo(object, index) → {fabric.Canvas}

将一个对象移动到所画对象的堆栈中的指定级别。

  • 传参:
Name Type Description
object fabric.Object Object to send
index Number Position to move to
  • 继承:fabric.StaticCanvas#moveTo
  • 源码:fabric.js, line 10263
  • 返回:fabric.Canvas

relativePan(point) → {fabric.Canvas}

平移操作

  • 传参:
Name Type Description
point fabric.Point (position vector) to move by
  • 继承:fabric.StaticCanvas#relativePan
  • 源码:fabric.js, line 9275
  • 返回:fabric.Canvas

remove(…object) → {Self}

从一个集合中移除对象,然后渲染画布(如果renderOnAddRemove不是false的话)。

  • 传参:
Name Type Attributes Description
object fabric.Object repeatable Zero or more fabric instances
  • 继承:fabric.StaticCanvas#remove
  • 混入:fabric.Collection.remove
  • 源码:fabric.js, line 417
  • 返回:Self

removeListeners()

移除所有监听事件

  • 源码:fabric.js, line 12632

renderAll() → {fabric.Canvas}

渲染顶部画布和二级容器画布。

  • 重写:fabric.StaticCanvas#renderAll
  • 源码:fabric.js, line 11659
  • 返回:fabric.Canvas

renderCanvas(ctx, objects) → {fabric.Canvas}

渲染背景、对象、叠加和控件。

  • 传参:
Name Type Description
ctx CanvasRenderingContext2D
objects Array to render
  • 继承:fabric.StaticCanvas#renderCanvas
  • 源码:fabric.js, line 9425
  • 返回:fabric.Canvas

renderTop() → {fabric.Canvas}

只渲染顶部画布的方法。也用于渲染组选择框。

  • 源码:fabric.js, line 11692
  • 返回:fabric.Canvas

requestRenderAll() → {fabric.Canvas}

为下一个动画帧添加一个renderAll请求。除非一个动画帧已经在进行中,在这种情况下,不做任何事情,一个布尔标志将避免添加更多的请求。

  • 继承:fabric.StaticCanvas#requestRenderAll
  • 源码:fabric.js, line 9386
  • 返回:fabric.Canvas

restorePointerVpt(pointer) → {Object}

返回不受视口影响的指针坐标。

  • 传参:
Name Type Description
pointer Object with “x” and “y” number values
  • 源码:fabric.js, line 12080
  • 返回: {x:Number,y:Number}

sendBackwards(object, intersectingopt) → {fabric.Canvas}

在绘制的对象堆栈中向下移动一个对象或一个选区。一个可选的参数,相交允许将对象移动到第一个相交的对象后面。交叉点是通过边界盒计算的。如果没有找到相交点,堆栈中就不会有变化。

  • 传参:
Name Type Attributes Description
object fabric.Object Object to send
intersecting Boolean optional If true, send object behind next lower intersecting object
  • 继承:fabric.StaticCanvas#sendBackwards
  • 源码:fabric.js, line 10121
  • 返回:fabric.Canvas

sendToBack(object) → {fabric.Canvas}

将一个对象或多选的对象移到所画对象堆栈的底部

  • 传参:
Name Type Description
object fabric.Object Object to send to back
  • 继承:fabric.StaticCanvas#sendToBack
  • 源码:fabric.js, line 10059
  • 返回:fabric.Canvas

setActiveObject(object, eopt) → {fabric.Canvas}

设置给定对象为画布上唯一的活动对象

  • 传参:
Name Type Attributes Description
object fabric.Object Object to set as an active one
e Event optional Event (passed along when firing “object:selected”)
  • 源码:fabric.js, line 12363
  • 返回:fabric.Canvas

setBackgroundColor(backgroundColor, callback) → {fabric.Canvas}

设置画布背景色

  • 传参:
Name Type Description
backgroundColor String fabric.Pattern Color or pattern to set background color to
callback function Callback to invoke when background color is set
  • 继承:fabric.StaticCanvas#setBackgroundColor
  • 源码:fabric.js, line 8944
  • 返回:fabric.Canvas
  • 示例
    Normal backgroundColor - color value
    canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
    fabric.Pattern used as backgroundColor
    
    canvas.setBackgroundColor({
          
      source: 'http://fabricjs.com/assets/escheresque_ste.png'
    }, canvas.renderAll.bind(canvas));
    fabric.Pattern used as backgroundColor with repeat and offset
    
    canvas.setBackgroundColor({
          
      source: 'http://fabricjs.com/assets/escheresque_ste.png',
      repeat: 'repeat',
      offsetX: 200,
      offsetY: 100
    }, canvas.renderAll.bind(canvas));
    

setBackgroundImage(image, callback, optionsopt) → {fabric.Canvas}

设置画布背景图片

  • 传参:
Name Type Attributes Description
image fabric.Image String fabric.Image instance or URL of an image to set background to
callback function Callback to invoke when image is loaded and set as background
options Object optional Optional options to set for the background image.
  • 继承:fabric.StaticCanvas#setBackgroundImage
  • 源码:fabric.js, line 8894
  • 返回:fabric.Canvas
  • 示例
    Normal backgroundImage with left/top = 0
    canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
          
      // Needed to position backgroundImage at 0/0
      originX: 'left',
      originY: 'top'
    });
    backgroundImage with different properties
    
    canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
          
      opacity: 0.5,
      angle: 45,
      left: 400,
      top: 400,
      originX: 'left',
      originY: 'top'
    });
    Stretched backgroundImage #1 - width/height correspond to canvas width/height
    
    fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img, isError) {
          
      img.set({
          width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
      canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
    });
    Stretched backgroundImage #2 - width/height correspond to canvas width/height
    
    canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
          
      width: canvas.width,
      height: canvas.height,
      // Needed to position backgroundImage at 0/0
      originX: 'left',
      originY: 'top'
    });
    backgroundImage loaded from cross-origin
    
    canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
          
      opacity: 0.5,
      angle: 45,
      left: 400,
      top: 400,
      originX: 'left',
      originY: 'top',
      crossOrigin: 'anonymous'
    });
    

setCursor(value)

设置鼠标样式

  • 传参:
Name Type Description
value String Cursor type of the canvas element.
  • 源码:fabric.js, line 11926
  • 参考:http://www.w3.org/TR/css3-ui/#cursor

setDimensions(dimensions, optionsopt) → {fabric.Canvas}

设置这个画布实例的尺寸(宽度,高度)。当options.cssOnly标志激活时,你也应该提供测量单位(px/%/em)。

  • 传参:
Name Type Attributes Description
dimensions Object Object with width/height properties
options Object optional Options object

dimensions Properties

Name Type Attributes Description
width Number | String optional Width of canvas element
height Number | String optional Height of canvas element

options Properties

Name Type Attributes Default Description
backstoreOnly Boolean optional false Set the given dimensions only as canvas backstore dimensions
cssOnly Boolean optional false Set the given dimensions only as css dimensions
  • 继承:fabric.StaticCanvas#setDimensions
  • 源码:fabric.js, line 9108
  • 返回:fabric.Canvas

setHeight(value, optionsopt) → {fabric.Canvas}

设置画布高度

  • 传参:
Name Type Attributes Description
value Number/String Value to set height to
options Object optional Options object

Properties

Name Type Attributes Default Description
backstoreOnly Boolean optional false Set the given dimensions only as canvas backstore dimensions
cssOnly Boolean optional false Set the given dimensions only as css dimensions
  • 继承:fabric.StaticCanvas#setHeight
  • 源码:fabric.js, line 9093
  • 返回:fabric.Canvas

setOverlayColor(overlayColor, callback) → {fabric.Canvas}

设置画布前景色

  • 传参:
Name Type Description
overlayColor String fabric.Pattern Color or pattern to set foreground color to
callback function Callback to invoke when foreground color is set
  • 继承:fabric.StaticCanvas#setOverlayColor
  • 源码:fabric.js, line 8919
  • 返回:fabric.Canvas
  • 示例
    Normal overlayColor - color value
    canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
    fabric.Pattern used as overlayColor
    
    canvas.setOverlayColor({
          
      source: 'http://fabricjs.com/assets/escheresque_ste.png'
    }, canvas.renderAll.bind(canvas));
    fabric.Pattern used as overlayColor with repeat and offset
    
    canvas.setOverlayColor({
          
      source: 'http://fabricjs.com/assets/escheresque_ste.png',
      repeat: 'repeat',
      offsetX: 200,
      offsetY: 100
    }, canvas.renderAll.bind(canvas));
    

setOverlayImage(image, callback, optionsopt) → {fabric.Canvas}

设置该画布的覆盖图像

  • 传参:
Name Type Attributes Description
image fabric.Image/String fabric.Image instance or URL of an image to set overlay to
callback function callback to invoke when image is loaded and set as an overlay
options Object optional Optional options to set for the overlay image.
  • 继承:fabric.StaticCanvas#setOverlayImage
  • 源码:fabric.js, line 8842
  • 返回:fabric.Canvas
  • 示例
    Normal overlayImage with left/top = 0
    canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
          
      // Needed to position overlayImage at 0/0
      originX: 'left',
      originY: 'top'
    });
    overlayImage with different properties
    
    canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
          
      opacity: 0.5,
      angle: 45,
      left: 400,
      top: 400,
      originX: 'left',
      originY: 'top'
    });
    Stretched overlayImage #1 - width/height correspond to canvas width/height
    
    fabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img, isError) {
          
      img.set({
          width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
      canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
    });
    Stretched overlayImage #2 - width/height correspond to canvas width/height
    
    canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
          
      width: canvas.width,
      height: canvas.height,
      // Needed to position overlayImage at 0/0
      originX: 'left',
      originY: 'top'
    });
    overlayImage loaded from cross-origin
    
    canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
          
      opacity: 0.5,
      angle: 45,
      left: 400,
      top: 400,
      originX: 'left',
      originY: 'top',
      crossOrigin: 'anonymous'
    });
    

setViewportTransform(vpt) → {fabric.Canvas}

设置此画布实例的视口变换

  • 传参:
Name Type Description
vpt Array the transform in the form of context.transform
  • 重写:fabric.StaticCanvas#setViewportTransform
  • 源码:fabric.js, line 9199
  • 返回:fabric.Canvas

setWidth(value, optionsopt) → {fabric.Canvas}

设置画布宽度

  • 传参:
Name Type Attributes Description
value Number/String Value to set width to
options Object optional Options object

Properties

Name Type Attributes Default Description
backstoreOnly Boolean optional false Set the given dimensions only as canvas backstore dimensions
cssOnly Boolean optional false Set the given dimensions only as css dimensions
  • 继承:fabric.StaticCanvas#setWidth
  • 源码:fabric.js, line 9080
  • 返回:fabric.Canvas

setZoom(value) → {fabric.Canvas}

设置缩放等级

  • 传参:
Name Type Description
value Number to set zoom to, less than 1 zooms out
  • 继承:fabric.StaticCanvas#setZoom
  • 源码:fabric.js, line 9251
  • 返回:fabric.Canvas

size() → {Number}

返回一个集合的大小(即:包含其对象的数组的长度)。

  • 继承:fabric.StaticCanvas#size
  • 混入:fabric.Collection.size
  • 源码:fabric.js, line 493
  • 返回:Number

straightenObject(object) → {fabric.Canvas}

调直对象,然后重新渲染画布

  • 传参:
Name Type Description
object fabric.Object Object to straighten
  • 继承:fabric.StaticCanvas#straightenObject
  • 源码:fabric.js, line 21333
  • 返回:fabric.Canvas

toCanvasElement(multiplieropt, croppingopt)

创建一个新的HTMLCanvas元素,用当前画布的内容绘制。不需要调整实际的大小或重新涂抹。将对象的所有权转移到一个新的画布上,画上它,然后把所有东西都设置回来。这是一个中间步骤,用于获取dataUrl,但它也有助于快速创建画布的图像副本,而无需传递dataUrl字符串。

  • 传参:
Name Type Attributes Description
multiplier Number optional a zoom factor.
cropping Object optional Cropping informations

Properties

Name Type Attributes Description
left Number optional Cropping left offset.
top Number optional Cropping top offset.
width Number optional Cropping width.
height Number optional Cropping height.
  • 继承:fabric.StaticCanvas#toCanvasElement
  • 源码:fabric.js, line 13811

toDatalessJSON(propertiesToIncludeopt) → {String}

返回canvas的无数据的JSON表示

  • 传参:
Name Type Attributes Description
propertiesToInclude Array optional Any properties that you might want to additionally include in the output
  • 继承:fabric.StaticCanvas#toDatalessJSON
  • 源码:fabric.js, line 9652
  • 返回:json string

toDatalessObject(propertiesToIncludeopt) → {Object}

返回画布的无数据对象表示

  • 传参:
Name Type Attributes Description
propertiesToInclude Array optional Any properties that you might want to additionally include in the output
  • 继承:fabric.StaticCanvas#toDatalessObject
  • 源码:fabric.js, line 9670
  • 返回:object representation of an instance

toDataURL(optionsopt) → {String}

将画布元素导出为dataurl图片。注意,当使用乘法器时,裁剪会有适当的比例。

  • 传参:
Name Type Attributes Description
options Object optional Options object

Properties

Name Type Attributes Default Description
format String optional png
quality Number optional 1
multiplier Number optional 1
left Number optional
top Number optional
width Number optional
height Number optional
enableRetinaScaling Boolean optional
  • 继承:fabric.StaticCanvas#toDataURL
  • 源码:fabric.js, line 13788
  • 返回:Returns a data: URL containing a representation of the object in the format specified by options.format
  • 示例
    Generate jpeg dataURL with lower quality
    var dataURL = canvas.toDataURL({
          
      format: 'jpeg',
      quality: 0.8
    });
    Generate cropped png dataURL (clipping of canvas)
    
    var dataURL = canvas.toDataURL({
          
      format: 'png',
      left: 100,
      top: 100,
      width: 200,
      height: 200
    });
    Generate double scaled png dataURL
    
    var dataURL = canvas.toDataURL({
          
      format: 'png',
      multiplier: 2
    });
    
  • toJSON(propertiesToIncludeopt) → {Object}

返回canvas的对象表示,提供这个别名是因为如果你在一个实例上调用JSON.stringify,toJSON对象将被调用,如果它存在的话。有一个toJSON方法意味着你可以做JSON.stringify(myCanvas)

  • 传参:
Name Type Attributes Description
propertiesToInclude Array optional Any properties that you might want to additionally include in the output
  • 继承:fabric.StaticCanvas#toJSON
  • 源码:fabric.js, line 10379
  • 教程: http://fabricjs.com/fabric-intro-part-3#serialization
  • 返回:JSON compatible object
  • 示例
    JSON without additional properties
    var json = canvas.toJSON();
    JSON with additional properties included
    
    var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']);
    JSON without default values
    
    canvas.includeDefaultValues = false;
    var json = canvas.toJSON();
    

toObject(propertiesToIncludeopt) → {Object}

返回画布的对象表示

  • 传参:
Name Type Attributes Description
propertiesToInclude Array optional Any properties that you might want to additionally include in the output
  • 继承:fabric.StaticCanvas#toObject
  • 源码:fabric.js, line 9661
  • 返回:object representation of an instance

toString() → {String}

返回一个实例的字符串表示

  • 继承:fabric.StaticCanvas#toString
  • 源码:fabric.js, line 10310
  • 返回:string representation of an instance

toSVG(optionsopt, reviveropt) → {String}

返回画布的SVG表示

  • 传参:
Name Type Attributes Description
options Object optional Options object for SVG output
viewBox Object optional SVG viewbox object

options Properties

Name Type Attributes Default Description
suppressPreamble Boolean optional false If true xml tag is not included

viewBox Properties

Name Type Attributes Description
x Number optional x-coordinate of viewbox
y Number optional y-coordinate of viewbox
width Number optional Width of viewbox
height Number optional Height of viewbox
encoding String optional UTF-8 Encoding of SVG output
width String optional desired width of svg with or without units
height String optional desired height of svg with or without units
reviver function optional Method for further parsing of svg elements, called after each fabric object converted into svg representation.
  • 继承:fabric.StaticCanvas#toSVG

  • 源码:fabric.js, line 9803

  • 教程: http://fabricjs.com/fabric-intro-part-3#serialization

  • 返回:SVG string

  • 示例

    Normal SVG output

    var svg = canvas.toSVG();
    SVG output without preamble (without <?xml ../>)
    
    var svg = canvas.toSVG({
          suppressPreamble: true});
    SVG output with viewBox attribute
    
    var svg = canvas.toSVG({
          
      viewBox: {
          
        x: 100,
        y: 100,
        width: 200,
        height: 300
      }
    });
    SVG output with different encoding (default: UTF-8)
    
    var svg = canvas.toSVG({
          encoding: 'ISO-8859-1'});
    Modify SVG output with reviver function
    
    var svg = canvas.toSVG(null, function(svg) {
          
      return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', '');
    });
    

viewportCenterObject(object) → {fabric.Canvas}

将对象在视口中的垂直和水平方向居中。

  • 传参:
Name Type Description
object fabric.Object Object to center vertically and horizontally
  • 继承:fabric.StaticCanvas#viewportCenterObject
  • 源码:fabric.js, line 9592
  • 返回:fabric.Canvas

viewportCenterObjectH(object) → {fabric.Canvas}

将对象在视口中水平居中,object.top保持不变。

  • 传参:
Name Type Description
object fabric.Object Object to center vertically and horizontally
  • 继承:fabric.StaticCanvas#viewportCenterObjectH
  • 源码:fabric.js, line 9604
  • 返回:fabric.Canvas

viewportCenterObjectV(object) → {fabric.Canvas}

在视口中垂直放置对象,对象的顶部不变。

  • 传参:
Name Type Description
object fabric.Object Object to center vertically and horizontally
  • 继承:fabric.StaticCanvas#viewportCenterObjectV
  • 源码:fabric.js, line 9616
  • 返回:fabric.Canvas

zoomToPoint(point, value) → {fabric.Canvas}

设置此画布实例的缩放级别,以点为中心的缩放意味着在同一点上的后续缩放将具有从该点开始的缩放的视觉效果。该点不会移动。它与画布中心或视口的视觉中心没有关系。

  • 传参:
Name Type Description
point fabric.Point to zoom with respect to
value Number to set zoom to, less than 1 zooms out
  • 继承:fabric.StaticCanvas#zoomToPoint
  • 源码:fabric.js, line 9233
  • 返回:fabric.Canvas
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hbh112233abc/article/details/122498432

智能推荐

ubuntu下nodejs升级方法_node使用cpnm-程序员宅基地

文章浏览阅读3.3k次。sudo npm cache cleansudo npm install -g n sudo n stable_node使用cpnm

设计模式最全总结_一个电脑有两台打印机,在输出的时候就要处理不能两台打印机打印同一个文件。-程序员宅基地

文章浏览阅读386次。设计模式最全总结什么是设计模式设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样。项目中合理的运用设计模式可以完美的解决很多问题,每种模式在现在中都有相应的原理来与之对应..._一个电脑有两台打印机,在输出的时候就要处理不能两台打印机打印同一个文件。

python考试复习资料_python开卷考什么-程序员宅基地

文章浏览阅读661次。_python开卷考什么

Vue接口请求取消(AbortController 和 CancelToken)_vue取消请求-程序员宅基地

文章浏览阅读2.9k次。Vue接口请求取消_vue取消请求

Oracle、MySQL、SQLserver、DB2等搬砖中常用函数整理~-程序员宅基地

文章浏览阅读324次。最近工作需要针对不同的客户经常切换使用不同的数据库,不同的数据库不同的函数把比较常用的一些函数整理一下,便于后续查找。

【ghost初级教程】 怎么搭建一个免费的ghost博客-程序员宅基地

文章浏览阅读259次。ghost博客系统无疑是这个月最火热的话题之一,这个号称”只为博客“的系统,早在项目开始之初就受到了众人的关注。它使用了当前最火热node.js技术,10月14日发布了V0.3.3版本。江湖传言它将是下一个wordpress。下面来看几张ghost博客的截图:看起来很酷,对吧!更重要的是搭建一个ghost博客非常非常的简单,ghost小组甚至在未来的几周之内会推出一项host服务,..._ghost博客如何关闭注册

随便推点

Ant Design Vue 表格数据按树型展示_ant design vue 树形表格-程序员宅基地

文章浏览阅读2.2k次。/** * 使用递归将数组转为树形结构 * 父ID属性为parent */ public static array2Tree (array: any, parentId: number) { if (Tool.isEmpty(array)) { return []; } const result = []; for (let i = 0; i < array.length; i++) { const c = array[i_ant design vue 树形表格

Java----冒泡排序(BubbleSort)_冒泡排序csdnjavabubblesortpanle-程序员宅基地

文章浏览阅读413次。冒泡排序(BubbleSort)源代码:public class BubbleSort { public static void main(String[] args) { int[] arr = { 10, 7, 2, 9, 3, 5 }; int t; System.out.println("排序前的数组为:"); ..._冒泡排序csdnjavabubblesortpanle

oracle 常用写法--Union与Union All_oracle union和union all写法-程序员宅基地

文章浏览阅读2.1k次。Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序; Union All:对两个结果集进行并集操作,包括重复行,不进行排序;_oracle union和union all写法

crontab计划任务统计内存使用情况_crontab占用内存-程序员宅基地

文章浏览阅读629次。编写crontab任务:每一分钟记录一次当前系统的内存使用情况,并附带时间。审题,题目要求1.查看系统内存使用情况2.把查看的内容记录下来3.附带时间4.编写crontab任务实验操作审题,题目要求1.查看系统内存使用情况top命令可以查看动态的内存使用情况2.把查看的内容记录下来可以用重定向符 >表示覆盖;>>表示追加。因为我们记录的并不只是一次,所以我们用>>3.附带时间实时时间,可以用date命令4.编写crontab任务crontab -e 命令直接编_crontab占用内存

spring mybatis 整合后mapper接口注入失败问题_mybatis mapper接口 为空-程序员宅基地

文章浏览阅读4.8w次,点赞4次,收藏7次。org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.fkhd.whiteshirt.daos.UserMapper] found for dependency: expected at least 1 bean which qualifies as auto_mybatis mapper接口 为空

VC2015运行库安装失败_vc2015运行库安装失败0x001113f8-程序员宅基地

文章浏览阅读4.1k次。VC2015安装失败,0x80240017-未指定的错误。32位操作系统64位操作系统_vc2015运行库安装失败0x001113f8

推荐文章

热门文章

相关标签