首页

Appearance

Class: Style ​

样式对象, 一般不直接使用

而是通过主题定义、图元的css({...})方法来自动管理

Table of contents ​

Constructors ​

Properties ​

Accessors ​

Methods ​

Constructors ​

constructor ​

new Style(init?)

Parameters ​

NameType
init?Object | Style

Properties ​

_backgroundColor ​

_backgroundColor: any

backgroundHeight ​

Optional backgroundHeight: number

backgroundRepeat ​

Optional backgroundRepeat: string

backgroundWidth ​

Optional backgroundWidth: number

borderColor ​

Optional borderColor: string

边框颜色, 如: "gray", "rgb(1,0,0)", "#FF0000"

borderRadius ​

Optional borderRadius: number | [number, number, number, number]

边框圆角, 如: 5

也支持支持数组: [0, 10, 20, 30]，四个角（比较老的浏览器可能不支持）

borderStyle ​

borderStyle: "solid" | "dashed" | "dotted"

边框样式

borderWidth ​

Optional borderWidth: number

边框宽度

className ​

className: any

color ​

Optional color: string

文字颜色, 如: "red"、"gray"、"rgb(1,0,0)"、 "#FF0000"、"rgba(255,0,0,0.8)"

fillStyle ​

Optional fillStyle: string | CanvasGradient | CanvasPattern

填充样式, 如: "red"、"gray"、"rgb(1,0,0)"、 "#FF0000"、"rgba(255,0,0,0.8)"

filter ​

Optional filter: string

滤镜效果， 例如：

高斯模糊：'blur(5px)'

灰度： 'grayscale(100%)' 用于将图像转换为灰度的滤镜

褐色: 'sepia(100%)' 用于将图像转换为深褐色的滤镜。

锐化： 'contrast(150%) brightness(120%)' 这种滤镜效果可以增强图像的锐度和清晰度，使其看起来更加清晰、鲜明。

颜色矫正: 'saturate(200%) hue-rotate(180deg)' 这种滤镜效果可以调整图像的色彩和色调，使其看起来更加自然、真实。

反色：'invert(100%)' 这种滤镜效果可以将图像中的颜色反转，从而创建出截然不同的视觉效果。

透明度：'opacity(50%)' 这种滤镜效果可以改变图像的透明度，使其看起来更加半透明或不透明。

饱和度：'saturate(200%)' 这种滤镜效果可以改变图像的饱和度，使其看起来更加鲜艳或柔和。

对比度：'contrast(200%)' 这种滤镜效果可以增加或减少图像的对比度，从而改变其亮度和明暗程度。

色调： 'hue-rotate(90deg)' 用于对图像应用滤镜以设置图像的色调旋转.

font ​

Optional font: string

字体, 如: "bold 20px sans-serif"

globalAlpha ​

Optional globalAlpha: number

整体透明度

globalCompositeOperation ​

Optional globalCompositeOperation: GlobalCompositeOperation

绘制模式

imageSmoothingEnabled ​

Optional imageSmoothingEnabled: boolean

于设置图片是否平滑，也就是是否抗锯齿

true 表示图片平滑（默认值），false 表示图片不平滑

lineCap ​

Optional lineCap: CanvasLineCap

lineCap

lineDash ​

Optional lineDash: Iterable<number>

虚线，例如[3,2]

lineDashOffset ​

Optional lineDashOffset: number

虚线偏移量

lineHeight ​

Optional lineHeight: number

文字行高

lineJoin ​

Optional lineJoin: CanvasLineJoin

lineJoin

lineWidth ​

Optional lineWidth: number

线宽度

miterLimit ​

Optional miterLimit: number

padding ​

Optional padding: number

边框和图形的间距

shadowBlur ​

Optional shadowBlur: number

阴影

shadowColor ​

Optional shadowColor: string

阴影颜色, 如: "red"、"gray"、"rgb(1,0,0)"、 "#FF0000"、"rgba(255,0,0,0.8)"

shadowOffsetX ​

Optional shadowOffsetX: number

阴影X方向的长度

shadowOffsetY ​

Optional shadowOffsetY: number

阴影y方向的长度

strokeStyle ​

Optional strokeStyle: string | CanvasGradient | CanvasPattern

线条样式, 对于Node而言就是边框线条。

如: "red"、"gray"、"rgb(1,0,0)"、 "#FF0000"、"rgba(255,0,0,0.8)"

textAlign ​

Optional textAlign: CanvasTextAlign

字体左右对齐方式

textBaseline ​

Optional textBaseline: CanvasTextBaseline

字体基线

textOffsetX ​

Optional textOffsetX: number

文本水平偏移量

textOffsetY ​

Optional textOffsetY: number

文本垂直偏移量

textPosition ​

Optional textPosition: RectPosition

文字位置

Accessors ​

background ​

get background(): any

Returns ​

any

set background(v): void

设置背景，如： "white url('./assets/img/grid.png') repeat",

Parameters ​

NameType
vany

Returns ​

void

backgroundColor ​

get backgroundColor(): any

Returns ​

any

set backgroundColor(v): void

Parameters ​

NameType
vany

Returns ​

void

backgroundImage ​

get backgroundImage(): any

Returns ​

any

set backgroundImage(v): void

背景图片, 如："abc.jpg", "url('aaaaaa.aa.png')"

Parameters ​

NameType
vany

Returns ​

void

backgroundPosition ​

get backgroundPosition(): any

Returns ​

any

set backgroundPosition(v): void

背景位置, 如："center top", "10px 10px"

Parameters ​

NameType
vany

Returns ​

void

backgroundSize ​

get backgroundSize(): string

Returns ​

string

set backgroundSize(v): void

背景大小, 如："100px 100px", "100px"

Parameters ​

NameType
vstring

Returns ​

void

border ​

get border(): any

Returns ​

any

set border(v): void

边框, 如: solid 1px gray

Parameters ​

NameType
vany

Returns ​

void

fontFamily ​

get fontFamily(): string

Returns ​

string

set fontFamily(family): void

字体名称， 例如： 'sans-serif', 'serif'

Parameters ​

NameType
familystring

Returns ​

void

fontSize ​

get fontSize(): string | number

Returns ​

string | number

set fontSize(size): void

字体大小， 例如： '20px', '12px'

Parameters ​

NameType
sizestring | number

Returns ​

void

fontWeight ​

get fontWeight(): string

Returns ​

string

set fontWeight(weight): void

字体重量, 如 : "bold" 、"italic" 、"bold italic"

Parameters ​

NameType
weightstring

Returns ​

void

Methods ​

applyTo ​

applyTo(ctx): void

Parameters ​

NameType
ctxany

Returns ​

void

computePadding ​

computePadding(): number

Returns ​

number

isDirty ​

isDirty(): boolean

Returns ​

boolean

toJSON ​

toJSON(imageIndexFn?): SerializedDisplayObject

Parameters ​

NameType
imageIndexFn?Function

Returns ​

SerializedDisplayObject

measureText ​

Static measureText(text, style, lineCount): Object

测量字符串在某个样式下的尺寸（以下因素均可能影响结果：文本是否多行、字体、字号、行高）

Parameters ​

NameTypeDescription
textstring | string[]-
styleStyle-
lineCountnumbertext的行数

Returns ​

Object

NameType
heightnumber
lineHeightnumber
widthnumber