Kinetic使用注意点--blob

new Blob(config)

  参数:
    config:包含所有配置项的对象。
        

{
    points: "存放路径点的数组,可以用一层数组[a,b,c,d]、二层数组[[a,b],[c,d]]或者一层数组对象[{x:a,y:b},{x:c,y:d}]来表示",
    tension: "曲线弯曲强度,默认是1,0表示不做强度拉伸处理,值越大曲线弯曲越强烈",
    fill: "填充色",
    fillRGB: "rgb填充色。用对象字面量表示{r:0,g:0,b:0}",
    fillR: "r填充色",
    fillG: "g填充色",
    fillB: "b填充色",
    fillPatternImage: "填充图案",
    fillPatternX: "填充图案横坐标",
    fillPatternY: "填充图案纵坐标",
    fillPatternOffset: "填充图案偏移量,可以用数组[a,b]或对象{x:a,y:b}来表示",
    fillPatternOffsetX: "填充图案x偏移量",
    fillPatternOffsetY: "填充图案y偏移量",
    fillPatternScale: "填充图案缩放量,可以用数组[a,b]或对象{x:a,y:b}来表示",
    fillPatternScaleX: "填充图案x缩放量",
    fillPatternScaleY: "填充图案y缩放量",
    fillPatternRotation: "填充图案旋转幅度",
    fillPatternRepeat: "填充图案平铺方式,可以是repeat、repeat-x、repeat-y或no-repeat,默认是no-repeat",
    fillLinearGradientStartPoint: "填充线性渐变起始点坐标,可以用数组[a,b]或对象{x:a,y:b}来表示",
    fillLinearGradientStartPointX: "填充线性渐变起始点x坐标",
    fillLinearGradientStartPointY: "填充线性渐变起始点y坐标",
    fillLinearGradientEndPoint: "填充线性渐变终点坐标,可以用数组[a,b]或对象{x:a,y:b}来表示",
    fillLinearGradientEndPointX: "填充线性渐变终点x坐标",
    fillLinearGradientEndPointY: "填充线性渐变终点y坐标",
    fillLinearGradientColorStops: "填充线性渐变颜色位置数组,[a,colorA,b,colorB]",
    fillRadialGradientStartPoint: "填充径向渐变起始点坐标,可以用数组[a,b]或对象{x:a,y:b}来表示",
    fillRadialGradientStartPointX: "填充径向渐变起始点x坐标",
    fillRadialGradientStartPointY: "填充径向渐变起始点y坐标",
    fillRadialGradientEndPoint: "填充径向渐变终点坐标,可以用数组[a,b]或对象{x:a,y:b}来表示",
    fillRadialGradientEndPointX: "填充径向渐变终点x坐标",
    fillRadialGradientEndPointY: "填充径向渐变终点y坐标",
    fillRadialGradientStartRadius: "填充径向渐变起始圆半径",
    fillRadialGradientEndRadius: "填充径向渐变结束圆半径",
    fillRadialGradientColorStops: "填充径向渐变颜色位置数组,[a,colorA,b,colorB]",
    fillEnabled: "是否启用blob的填充功能,默认为true",
    fillPriority: "填充优先级,填充选择可以是color、linear-gradient、radial-gradient或pattern。默认值是color",
    stroke: "描边色",
    strokeRGB: "rgb描边色。用对象字面量表示{r:0,g:0,b:0}",
    strokeR: "r描边色",
    strokeG: "g描边色",
    strokeB: "b描边色",
    strokeWidth: "描边宽度",
    strokeScaleEnabled: "是否启用blob的描边缩放功能,默认为true",
    strokeEnabled: "是否启用blob的描边功能,默认为true",
    lineJoin: "线段连接样式,连接选择可以是斜角(miter)、圆角(round)或平角(bevel)。默认值是斜角(miter)",
    lineCap: "线段端点样式,端点选择可以是butt、round或square。默认值是斜角(butt)",
    shadowColor: "阴影色",
    shadowColorRGB: "rgb阴影色。用对象字面量表示{r:0,g:0,b:0}",
    shadowColorR: "r阴影色",
    shadowColorG: "g阴影色",
    shadowColorB: "b阴影色",
    shadowBlur: "阴影模糊值",
    shadowOffset: "填充图案偏移量,可以用数组[a,b]或对象{x:a,y:b}来表示",
    shadowOffsetX: "阴影模糊x偏移量",
    shadowOffsetY: "阴影模糊y偏移量",
    shadowOpacity: "阴影透明度,取值范围为0-1",
    shadowEnabled: "是否启用blob的阴影功能,默认为true",
    dashArray: "破折号数组,[线段a,间隔a,线段b,间隔b,...]",
    dashArrayEnabled: "是否启用blob的破折号功能,默认为true",
    x: "横坐标",
    y: "纵坐标",
     "宽度",
    height: "高度",
    visible: "是否可见,默认为true",
    listening: "是否处于事件监听状态,默认为false",
    id: "唯一标识符",
    name: "名称(非唯一)",
    opacity: "blob透明度,取值为0-1",
    scale: "缩放量,可以用数组[a,b]或对象{x:a,y:b}来表示",
    scaleX: "x缩放量",
    scaleY: "y缩放量",
    rotation: "旋转角度,单位为弧度",
    rotationDeg: "旋转角度,单位为角度",
    offset: "偏移量,可以用数组[a,b]或对象{x:a,y:b}来表示",
    offsetX: "x偏移量",
    offsetY: "y偏移量",
    draggable: "是否启用节点拖动功能,默认为false",
    dragBoundFunc: "拖动边界函数"
}

  方法:
     

    clear():从canvas中清除当前层。暂不支持。
    clone(attrs):克隆节点,允许属性覆盖。    
    destroy():移除并且销毁节点。暂不支持。
    disableDashArray():禁用破折号数组。
    disableFill():禁用颜色填充。
    disableShadow():禁用阴影。
    disableStroke():禁用描边。
    disableStrokeScale():禁用描边缩放。
    enableDashArray():开启破折号数组。
    enableFill():开启颜色填充。
    enableShadow():开启阴影。
    enableStroke():开启描边。
    enableStrokeScale():开启描边缩放。
    fire(eventType, evt, bubble):
         eventType:事件类型。
         evt:事件对象。
         bubble:是否冒泡,true/false,默认false不冒泡。
    getAbsoluteOpacity():获取透明度。
    getAbsolutePosition():获取相对于容器左上角的位置坐标。
    getAbsoluteTransform():获取变换对象。
    getAbsoluteZIndex():获取层次索引。暂不支持
    getAttr(attr):获取指定属性的属性值。
    getAttrs():获取属性对象。
    getCanvas():获取canvas渲染器。暂不支持。
    getClassName():获取类型名。
    getClearBeforeDraw():获取是否设置了在绘画之前清空canvas。
    getContext():获取canvas上下文。
    getDashArray():获取破折号数组。
    getDashArrayEnabled():获取破折号数组是否开启。
    getDragBoundFunc():获取边界函数。
    getDraggable():获取可拖动性。
    getDrawFunc():获取绘画函数。
    getDrawHitFunc():获取绘画碰撞函数。
    getFill():获取填充色。
    getFillB():获取b填充色。
    getFillEnabled():获取填充色是否开启。
    getFillG():获取g填充色。
    getFillLinearGradientColorStops():获取填充线性渐变颜色位置点数组。
    getFillLinearGradientEndPoint():获取填充线性渐变终点坐标。
    getFillLinearGradientEndPointX():获取填充线性渐变终点横坐标。
    getFillLinearGradientEndPointY():获取填充线性渐变终点纵坐标。
    getFillLinearGradientStartPoint():获取填充线性渐变起始点纵坐标。
    getFillLinearGradientStartPointX():获取填充线性渐变起始点横坐标。
    getFillLinearGradientStartPointY():获取填充线性渐变起始点纵坐标。
    getFillPatternImage():获取填充图案图片对象。
    getFillPatternOffset():获取填充图案偏移坐标。
    getFillPatternOffsetX():获取填充图案偏移横坐标。
    getFillPatternOffsetY():获取填充图案偏移纵坐标。
    getFillPatternRepeat():获取填充图案平铺方式。
    getFillPatternRotation():获取填充图案旋转弧度。
    getFillPatternRotationDeg():获取填充图案旋转角度。
    getFillPatternScale():获取填充图案缩放值。
    getFillPatternScaleX():获取填充图案横坐标方向缩放值。
    getFillPatternScaleY():获取填充图案纵坐标方向缩放值。
    getFillPatternX():获取填充图案横坐标。
    getFillPatternY():获取填充图案纵坐标。
    getFillPriority():获取填充优先级。
    getFillR():获取r填充色。
    getFillRadialGradientColorStops():获取填充径向渐变颜色位置点数组。
    getFillRadialGradientEndPoint():获取填充径向渐变终点坐标。
    getFillRadialGradientEndPointX():获取填充径向渐变终点横坐标。
    getFillRadialGradientEndPointY():获取填充径向渐变终点纵坐标。
    getFillRadialGradientEndRadius():获取填充径向渐变终点圆半径。
    getFillRadialGradientStartPoint():获取填充径向渐变起始点坐标。
    getFillRadialGradientStartPointX():获取填充径向渐变起始点横坐标。
    getFillRadialGradientStartPointY():获取填充径向渐变起始点纵坐标。
    getFillRadialGradientStartRadius():获取填充径向渐变起始点圆半径。
    getFillRGB():获取rgb填充色字面对象。
    getHeight():获取高度。
    getHitCanvas():获取碰撞canvas。
    getId():获取id。
    getLayer():获取所在层。
    getLevel():获取节点层级,stage层级是0,layers层级是1,groups和shapes层级>=2。
    getLineCap():获取端点样式。
    getLineJoin():获取线段连接样式。
    getListening():是否正处于事件监听状态。
    getName():获取名字。
    getOffset():获取偏移值。
    getOffsetX():获取x轴方向偏移值。
    getOffsetY():获取y轴方向偏移值。
    getOpacity():获取透明度。
    getParent():获取父容器。
    getPosition():获取相对于父节点的位置。
    getRotation():获取旋转幅度。
    getRotationDeg():获取旋转角度。
    getScale():获取缩放量。
    getScaleX():获取x轴缩放量。
    getScaleY():获取y轴缩放量。
    getShadowBlur():获取阴影模糊值。
    getShadowColor():获取阴影颜色值。
    getShadowColorB():获取阴影b颜色值。
    getShadowColorG():获取阴影g颜色值。
    getShadowColorR():获取阴影r颜色值。
    getShadowColorRGB():获取阴影rgb颜色值。
    getShadowEnabled():查询阴影功能是否开启。
    getShadowOffset():查询阴影偏移值。
    getShadowOffsetX():查询阴影x轴方向偏移值。
    getShadowOffsetY():查询阴影y轴方向偏移值。
    getShadowOpacity():查询阴影透明度。
    getSize():查询尺寸。
    getSkew():查询坐标。
    getSkewX():查询横坐标。
    getSkewY():查询纵坐标。
    getStage():获取stage。
    getStroke():获取描边色。
    getStroke():获取描边色。
    getStrokeB():获取描边b颜色值。
    getStrokeEnabled():检测描边功能是否开启。
    getStrokeG():获取描边g颜色值。
    getStrokeR():获取描边r颜色值。
    getStrokeRGB():获取描边rgb颜色值。
    getStrokeScaleEnabled():检测描边缩放功能是否开启。
    getStrokeWidth():获取描边宽度。
    getTension():获取张力。
    getTransform():获取节点变换对象。
    getType():获取节点类型。
    getVisible():检测节点可见性。
    getWidth():获取节点宽度。
    getX():获取节点横坐标。
    getY():获取节点纵坐标。
    getZIndex():获取相对于兄弟节点的层级。
    hasFill():检测是否设置了填充物。
    hasShadow():检测是否设置了阴影。
    hide():隐藏节点。
    intersects(point):检测给定坐标点是否在节点内。
    isDraggable():检测节点是否可以拖动。
    isDraggable():检测节点是否可以拖动,等同于getDraggable()。
    isDragging():检测节点当前是否处于拖拽模式。
    isListening():检测节点当前是否处于事件监听模式,等同于getListening()。
    isVisible():检测节点的可见性,等同于getVisible()。
    move(x, y):相对于节点当前位置的移动。
    moveDown():下移节点。
    moveTo(newContainer):移动节点到新的容器。
    moveToBottom():移动节点到它的兄弟节点的下面。
    moveToTop():移动节点到它的兄弟节点的上面。
    moveUp():上移节点。
    off(typesStr):移除节点的事件绑定。多个事件名用空格分隔。也可以使用命名空间的方式移除事件绑定。
    on(typesStr, handler):添加事件绑定。多个事件名用空格分隔。也可以使用命名空间的方式进行事件绑定。
    remove():移除节点,但是不会销毁。
    rotate(theta):让节点旋转指定的幅度。
    rotateDeg(deg):让节点旋转指定的角度。
    setAbsolutePosition(x, y):设置节点的绝对位置。
    setAttr(attr):设置节点的单个属性。
    setAttrs(config):设置节点的多个属性。
    setClearBeforeDraw(clearBeforeDraw):设置节点重绘前是否需要清空之前的绘制,clearBeforeDraw可以为true/false。
    setDashArray(dashArray):设置破折号数组。
    setDashArrayEnabled(enabled):设置是否开启破折号数组功能。
    setDragBoundFunc(dragBoundFunc):设置边界函数。
    setDragBoundFunc(dragBoundFunc):设置边界函数。
    setDraggable(draggable):设置节点可拖动性。
    setDrawFunc(drawFunc):设置绘画函数。
    setDrawHitFunc(drawHitFunc):设置碰撞绘画函数。
    setFill(color):设置颜色值。
    setFillB(blue):设置b颜色值。
    setFillEnabled(enabled):设置是否开启颜色填充功能。
    setFillG(green):设置g颜色值。
    setFillLinearGradientColorStops(colorStops):设置线性渐变位置颜色数组。
    setFillLinearGradientEndPoint(endPoint):设置线性渐变终点坐标。
    setFillLinearGradientEndPointX(x):设置线性渐变终点横坐标。
    setFillLinearGradientEndPointY(y):设置线性渐变终点纵坐标。
    setFillLinearGradientStartPoint(startPoint):设置线性渐变起点坐标。
    setFillLinearGradientStartPointX(x):设置线性渐变起点横坐标。
    setFillLinearGradientStartPointY(y):设置线性渐变起点纵坐标。
    setFillPatternImage(image):设置填充图案的图片对象。
    setFillPatternOffset(offset):设置填充图案的偏移值。
    setFillPatternOffsetX(x):设置填充图案x轴方向的偏移值。
    setFillPatternOffsetY(y):设置填充图案y轴方向的偏移值。
    setFillPatternRepeat(repeat):设置填充图案的平铺方式。
    setFillPatternRepeat(repeat):设置填充图案的旋转弧度。
    setFillPatternRotationDeg(rotationDeg):设置填充图案的旋转角度。
    setFillPatternScale(scale):设置填充图案的所放比。
    setFillPatternScaleX(x):设置填充图案x轴方向的所放比。
    setFillPatternScaleY(y):设置填充图案y轴方向的所放比。
    setFillPatternX(x):设置填充图案横坐标。
    setFillPatternY(y):设置填充图案纵坐标。
    setFillPriority(priority):设置填充优先方式。
    setFillR(red):设置填充r颜色值。
    setFillRadialGradientColorStops(colorStops):设置径向渐变位置颜色数组。
    setFillRadialGradientEndPoint(endPoint):设置径向渐变终点坐标。
    setFillRadialGradientEndPointX(x):设置径向渐变终点横坐标。
    setFillRadialGradientEndPointY(y):设置径向渐变终点纵坐标。
    setFillRadialGradientEndRadius(radius):设置径向渐变终点半径。
    setFillRadialGradientStartPoint(startPoint):设置径向渐变起点坐标。
    setFillRadialGradientStartPointX(x):设置径向渐变起点横坐标。
    setFillRadialGradientStartPointY(y):设置径向渐变起点纵坐标。
    setFillRadialGradientStartRadius(radius):设置径向渐变起点半径。
    setFillRGB(color):设置rgb颜色值。
    setHeight(height):设置节点高度。
    setId(id):设置节点id。
    setLineCap(lineCap):设置端点样式。
    setLineJoin():设置连接样式。
    setListening(listening):设置事件监听状态。
    setName(name):设置节点名称。
    setOffset(x, y):设置节点偏移值。
    setOffsetX(x):设置节点x轴方向偏移值。
    setOffsetY(y):设置节点y轴方向偏移值。
    setOpacity(opacity):设置节点透明度。
    setPoints(can):设置路径点数组。
    setPosition(x, y):设置节点相对于父节点位置。
    setRotation(theta):设置节点旋转幅度。
    setRotationDeg(deg):设置节点旋转角度。
    setScale(scale):设置节点缩放比。
    setScaleX(x):设置节点x轴方向缩放比。
    setScaleY(y):设置节点y轴方向缩放比。
    setShadowBlur(blur):设置阴影模糊值。
    setShadowColor(color):设置阴影颜色值。
    setShadowColorB(blue):设置阴影b颜色值。
    setShadowColorG(green):设置阴影g颜色值。
    setShadowColorR(red):设置阴影r颜色值。
    setShadowColorRGB(color):设置阴影rgb颜色值。
    setShadowEnabled(enabled):设置是否开启阴影功能。
    setShadowOffset(offset):设置阴影偏移值。
    setShadowOffsetX(x):设置阴影x轴方向偏移值。
    setShadowOffsetY(y):设置阴影y轴方向偏移值。
    setShadowOpacity(opacity):设置阴影透明度。
    setSize(width, height):设置节点尺寸。
    setSkew(x, y):设置节点坐标。
    setSkewX(x):设置节点横位置。
    setSkewY(y):设置节点纵位置。
    setStroke(color):设置描边色。
    setStrokeB(blue):设置描边b颜色值。
    setStrokeEnabled(enabled):设置是否开启节点描边功能。
    setStrokeG(green):设置描边g颜色值。
    setStrokeR(red):设置描边r颜色值。
    setStrokeRGB(color):设置描边rgb颜色值。
    setStrokeScaleEnabled(enabled):开启/关闭描边缩放功能。
    setStrokeWidth(strokeWidth):设置描边宽度。
    setTension(tension):设置张力。
    setVisible(visible):设置节点可见性。
    setWidth(width):设置节点宽度。
    setX(x):设置节点x轴坐标。
    setY(y):设置节点y轴坐标。
    setZIndex(zIndex):设置节点相对于兄弟节点的层级。
    show():显示节点。
    startDrag():开始拖动。
    stopDrag():停止拖动。
    toDataURL(config):创建图片data url。
        {
            callback:"合成后的回调函数",
            mimeType:"指定合成图片的类型,image/png是默认类型",
            x:"横坐标",
            y:"纵坐标",
            "宽度",
            height:"高度",
            quality:"合成图片的质量,0-1"
        }
    toImage(config):合成图片。
       {
            callback:"合成后的回调函数",
            mimeType:"指定合成图片的类型,image/png是默认类型",
            x:"横坐标",
            y:"纵坐标",
            "宽度",
            height:"高度",
            quality:"合成图片的质量,0-1"
       }
    toJSON():将节点转换为json字符串。
    toObject():将json字符串转换为json对象。
    
    
    

  

原文地址:https://www.cnblogs.com/maqunjing/p/3160325.html