Canvas 在GitHub上点星最高的框架Fabricjs 第三弹

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时调用