Canvas 在GitHub上点星最高的框架Fabricjs 第三弹
官方文档都要翻烂了,搞死我了,结果没人翻译还得自己总结这是我吧canvas对象参数和普通组件通用参数给整合了一下,发给大家,没有一一去尝试,大家如果有尝试过的记得来我这详细说明哈~~
//通用参数
const object ={
//仅在将对象用作clipPath时才有意义。如果为true,clipPath的顶部和左侧将相对于画布,并且不受对象变换的影响。这将使clipPath相对于画布,但仅剪切特定对象。警告这是测试版,此功能可能会更改或重命名。从2.4.0开始
absolutePositioned:true,
//在画布对象中描述对象的角位置绝对坐标属性为tl,tr,bl,br,并描述四个主角。每个属性都是一个带有x,y,Fabric.Point实例的对象。坐标取决于以下属性:宽度,高度,scaleX,scaleY skewX,skewY,角度,strokeWidth,顶部,左侧。这些坐标对于了解对象在哪里很有用。它们会使用oCoords更新,但是在缩放或平移更改时无需更新。坐标使用@method setCoords更新。您可以计算它们而无需使用@method calcCoords(true)更新。
// aCoords:{
// tl:[],
// tr:[],
// bl:[],
// br:[]
// },
//物体的旋转角度(度)
angle:56,
backgroundColor:"red",
//边框颜色
borderColor:"red",
//指定对象边框的虚线图案的数组(hasBorder必须为true)
borderDashArray:[],
//当对象处于活动和移动状态时,对象的控制边界不透明
borderOpacityWhenMoving:80,
// 对象控制边界的比例因子
borderScaleFactor:20,
//在检查高速缓存是否需要刷新时要考虑的属性列表可以通过statefullCache ON(或如果需要的话是惰性模式)或通过单次调用Object.set(key,value)来检查那些属性。如果关键点在此列表中,则将该对象标记为脏并在下一次渲染时刷新
cacheProperties:[],
//设置为true时,通过控件旋转时,此对象将以中心点为变换的原点。 向后不兼容说明:此属性替代“ centerTransform”(布尔值)。
centeredRotation:true,
//如果为true,则在通过控件缩放时,此对象将使用中心点作为变换的原点。 向后不兼容说明:此属性替代“ centerTransform”(布尔值)。
centeredScaling:true,
//控制对象角的颜色
cornerColor:"red",
// 指定对象控件的破折号模式的数组(hasBorder必须为true)
cornerDashArray:[],
//对象控制角的大小(以像素为单位)
cornerSize:10,
// 控制对象角的颜色(当它是活动的且透明时,角为false)
cornerStrokeColor:"red",
// 指定控制方式,“rect”或“circle”
cornerStyle:"rect",
// 当设置为“ true”时,对象的缓存将在下一次渲染调用时重新渲染。从1.7.0开始
dirty:true,
//设置为false时,对象不能成为事件的目标。所有事件都通过它传播。在v1.3.4中引入
evented:true,
// 如果为true,则不会以OBJECT / JSON格式导出对象
excludeFromExport:false,
// 对象填充的颜色采用CSS颜色https://www.w3.org/TR/css-color-3/
fill:"red",
// 如果为true,则将对象渲染为水平翻转
flipX:true,
// 如果为true,则将对象渲染为垂直翻转
flipY:true,
// 用于画布globalCompositeOperation的复合规则
globalCompositeOperation:"source-over",
// 设置为false时,不呈现对象的控制边界
hasBorders:false,
// 设置为false时,不显示对象的控件,并且不能用于操作对象
hasControls:false,
// 设置为“ false”时,对象的控制旋转点将不可见或无法选择
hasRotatingPoint:false,
height:80,
// 将鼠标悬停在画布上此对象时使用的默认光标值
hoverCursor:"",
// 如果为false,则默认对象的值不包含在其序列化中
includeDefaultValues:false,
// 仅在将对象用作clipPath时才有意义。如果为true,则clipPath将使对象从2.4.0版本开始剪辑到clipPath的外部
inverted:true,
left:12,
//为“ true”时,对象水平移动被锁定
lockMovementX:true,
lockMovementY:true,
// 为true时,对象旋转被锁定
lockRotation:true,
//如果为true,则无法通过缩放为负值来翻转对象
lockScalingFlip:true,
// 当为true时,对象水平缩放被锁定
lockScalingX:true,
lockScalingY:true,
// 为true时,对象水平倾斜被锁定
lockSkewingX:true,
lockSkewingY:true,
// 当为true时,对象非均匀缩放被锁定
lockUniScaling :true,
//对象的最小允许比例值
minScaleLimit :5,
// 在画布上移动此对象时使用的默认光标值
moveCursor:"",
// 如果为true,则在缩放期间不会更新缓存。如果缩放比例过大,图片将变得块状,并在缩放结束时以正确的细节重新绘制。此设置取决于性能和应用程序。自1.7.0起默认为true
noScaleCache:true,
// 当为true时,对象被缓存在另一个画布上。当为false时,除非必要(clipPath)默认为true,否则不缓存对象
objectCaching:true,
//在画布元素坐标中描述对象的角位置。主控件的属性为tl,mt,tr,ml,mr,bl,mb,br,mtr。每个属性都是一个带有x,y和角的对象。“ corner”属性以相似的方式包含角部交互区域的4个点。坐标取决于以下属性:宽度,高度,scaleX,scaleY skewX,skewY,角度,strokeWidth,viewportTransform,顶部,左侧,填充。坐标使用@method setCoords更新。您可以计算它们而无需使用@method calcCoords更新。
oCoords:[],
opacity:0.8,
// 对象转换的水平原点(“left”,“right”,“center”之一)请参见http://jsfiddle.net/1ow02gea/244/,有关originX / originY如何影响组中的对象
originX:"left",
//(“top”,“center”,“botton”之一)
originY:"top",
// 对象及其控制边界之间的填充(以像素为单位)
padding:55,
// 确定是先绘制填充还是笔划(one of "fill" or "stroke")
paintFirst:"fill",
// 设置为“ true”时,将在画布上以像素为单位“找到”对象,而不是根据边界框
perPixelTargetFind:true,
// 对象控制旋转点的偏移量(通过“ hasRotatingPoint”启用时)
rotationPointOffset:55,
// 对象比例因子(水平)
scaleX:1,
// 对象比例因子(垂直)
scaleY:1,
//选择对象的背景颜色。处于活动状态时在对象后面的着色层。不能与globalCompositeOperation方法混合使用。
selectionBackgroundColor:"red",
// 表示此形状阴影的阴影对象
shadow:{},
// 在对象的x轴上的偏斜角(以度为单位)
skewX:55,
// 在对象的y轴上的偏斜角(以度为单位)
skewY:55,
// 当为true时,检查对象属性的高速缓存无效。在某些特定情况下,您可能希望禁用此功能(喷刷,超大笔,组),或者如果您的应用程序不允许您修改要为组禁用的子组的属性,请禁用该功能。自1.7.0起默认为false
statefullCache:true,
// 检查对象的状态是否已更改(fabric.Object#hasStateChanged)以及历史记录(撤消/重做)时要考虑的属性列表
stateProperties:[],
// 定义后,对象将通过笔触渲染,并且此属性指定其颜色采用css颜色https://www.w3.org/TR/css-color-3/
stroke:"red",
// 指定对象笔划虚线图案的数组(必须定义笔划)
strokeDashArray:[],
//对象笔触的线偏移
strokeDashOffset:55,
// 对象笔划的线尾样式("butt", "round", "square")
strokeLineCap:"butt",
// 对象笔触的角样式(“ bevil”,“ round”,“ miter”之一)
strokeLineJoin:"round",
//对象笔触的最大斜接长度(用于strokeLineJoin =“ miter”)
strokeMiterLimit:55,
// 如果为“ false”,则笔画宽度将随对象缩放。如果为true,则笔划将始终与为笔划宽度输入的确切像素大小匹配。默认为假
strokeUniform:false,
//用于渲染此对象的笔触宽度
strokeWidth:1,
// 对象的最高位置。请注意,默认情况下,它是相对于对象顶部的。您可以通过设置originY = {top / center / bottom}来更改此设置
top:50,
// 设置为true时,对象的控制角在内部呈现为透明(即笔触而不是填充)
transparentCorners:true,
// 对象的类型(矩形,圆形,路径等)。请注意,此属性是只读的,而不是要修改的。如果您进行修改,Fabric的某些部分(例如JSON加载)将无法正常工作。
// type:
// 设置为false时,对象不会在画布上渲染
visible:true,
// 设置为false时,对象不会在画布上渲染
width:55
}
//**canvas 配置参数**
const option = {
backgroundColor:'rgb(100,100,200)',
selectionColor:'blue',//选中区域的背景色
selectionLineWidth:2,//选中区域边框宽度
//选中区域的背景图
backgroundImage:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582866306498&di=1950e72b215cdb76ae3586f6989ebaab&imgtype=0&src=http%3A%2F%2Fp2.ifengimg.com%2Fa%2F2018_13%2Fb5d1efb73c45794_size105_w1024_h683.jpg'
,fpsUpdate:function(res){//初始化执行
console.log(res)
},
allowTouchScrolling:false,//指示在使用触摸屏并在画布上拖动时是否可以滚动浏览器
//指示哪个键启用对角值的替代操作:“ altKey”,“ shiftKey”,“ ctrlKey”。如果`null`或'none'或不是修饰键功能的任何其他字符串被禁用,则禁用功能。
altActionKey:"altKey",
//指示在目标与活动对象值“ altKey”,“ shiftKey”,“ ctrlKey”重叠的情况下,哪个键启用替代选择。出于对事物应如何工作的普遍期望而产生的一系列原因,此功能仅在true时才起作用。如果`null`或'none'或其他不是修饰键功能的字符串被禁用。
altSelectionKey:"shiftKey",
//如果设置为错误的背景图像,则不受视口变换的影响
backgroundVpt:true,
//指示哪个键启用居中的Transform值:“ altKey”,“ shiftKey”,“ ctrlKey”。如果`null`或'none'或不是修饰键功能的任何其他字符串被禁用,则禁用功能。
centeredKey:"ctrlKey",
//如果为true,则对象将中心点用作旋转变换的原点。 向后不兼容说明:此属性替代“ centerTransform”(布尔值)。
centeredRotation:true,
centeredScaling:true,
//无需描边即可定义其形状的裁剪区域的fabricObject。填充为黑色时,将在渲染画布时使用clipPath对象,并将上下文放置在画布的左上角。如果您不希望发生这种情况,clipPath会裁剪掉控件,请使用controlsAboveOverlay = true
clipPath:object,
// 指示是否在重叠图像上方渲染对象控件(边界/控件)
controlsAboveOverlay:true,
// 用于整个画布的默认光标值
defaultCursor:"default",
// 设置为true时,devicePixelRatio缩放画布以在视网膜屏幕上更好地渲染
enableRetinaScaling:true,
// 指示画布是否可以触发中间点击事件
fireMiddleClick:true,
// 指示画布是否可以触发右键单击事件
fireRightClick:true,
// 自由绘制期间使用的光标值
freeDrawingCursor:"crosshair",
// 将鼠标悬停在画布上的对象上时使用的默认光标值
hoverCursor:"move",
//指示toObject / toDatalessObject是否应包含默认值(如果设置为false),则优先于对象值。
includeDefaultValues:true,
//指示画布是交互式的。此属性不应更改。
interactive:true,
// 如果为true,则画布上的鼠标事件(mousedown / mousemove / mouseup)会导致自由绘制。按下鼠标后,mousemove将创建一个形状,然后将其最终确定并在画布上添加一个“ fabric.Path”实例。
isDrawingMode:true,
// 在画布上移动对象时使用的默认光标值
moveCursor:"move",
// 用于禁用元素的游标值(具有禁用操作的角)
notAllowedCursor:"not-allowed",
// 画布实例的叠加颜色。应该通过fabric.StaticCanvas#setOverlayColor进行设置
// overlayColor:{},
}//加载canvas时调用