首页

Appearance

Class: Style ​

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

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

Implements ​

Table of contents ​

Constructors ​

Properties ​

Accessors ​

Methods ​

Constructors ​

constructor ​

new Style(init?)

Parameters ​

NameType
init?PartStyleOptionType

Properties ​

backgroundColor ​

Optional backgroundColor: string

背景颜色

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: string

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: number[]

虚线，例如[3,2]

lineDashOffset ​

Optional lineDashOffset: number

虚线偏移量

lineHeight ​

Optional lineHeight: number

文字行高

lineJoin ​

Optional lineJoin: CanvasLineJoin

lineJoin

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: RectPositionType

文字位置

Accessors ​

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

lineWidth ​

get lineWidth(): number

Returns ​

number

set lineWidth(v): void

Parameters ​

NameType
vnumber

Returns ​

void

Methods ​

applyTo ​

applyTo(ctx): void

Parameters ​

NameType
ctxCanvasRenderingContext2D

Returns ​

void

computePadding ​

computePadding(): number

Returns ​

number

toJSON ​

toJSON(imageIndexFn?): SerializedDisplayObjectType

Parameters ​

NameType
imageIndexFn?Function

Returns ​

SerializedDisplayObjectType

measureText ​

Static measureText(text, style, lineCount, defaultFont?): Object

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

Parameters ​

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

Returns ​

Object

NameType
widthnumber
heightnumber
lineHeightnumber