Appearance
@jtopo/core / Style
Class: Style
样式对象, 一般不直接使用
而是通过主题定义、图元的css({...})方法来自动管理
Implements
Table of contents
Constructors
Properties
- backgroundColor
- borderColor
- borderRadius
- borderStyle
- borderWidth
- className
- color
- fillStyle
- filter
- font
- globalAlpha
- globalCompositeOperation
- imageSmoothingEnabled
- lineCap
- lineDash
- lineDashOffset
- lineHeight
- lineJoin
- miterLimit
- padding
- shadowBlur
- shadowColor
- shadowOffsetX
- shadowOffsetY
- strokeStyle
- textAlign
- textBaseline
- textOffsetX
- textOffsetY
- textPosition
Accessors
Methods
Constructors
constructor
new Style(init?
)
Parameters
Name | Type |
---|---|
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
Name | Type |
---|---|
v | any |
Returns
void
fontFamily
get
fontFamily(): string
Returns
string
set
fontFamily(family
): void
字体名称, 例如: 'sans-serif', 'serif'
Parameters
Name | Type |
---|---|
family | string |
Returns
void
fontSize
get
fontSize(): string
| number
Returns
string
| number
set
fontSize(size
): void
字体大小, 例如: '20px', '12px'
Parameters
Name | Type |
---|---|
size | string | number |
Returns
void
fontWeight
get
fontWeight(): string
Returns
string
set
fontWeight(weight
): void
字体重量, 如 : "bold" 、"italic" 、"bold italic"
Parameters
Name | Type |
---|---|
weight | string |
Returns
void
lineWidth
get
lineWidth(): number
Returns
number
set
lineWidth(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Methods
applyTo
applyTo(ctx
): void
Parameters
Name | Type |
---|---|
ctx | CanvasRenderingContext2D |
Returns
void
computePadding
computePadding(): number
Returns
number
toJSON
toJSON(imageIndexFn?
): SerializedDisplayObjectType
Parameters
Name | Type |
---|---|
imageIndexFn? | Function |
Returns
measureText
Static
measureText(text
, style
, lineCount
, defaultFont?
): Object
测量字符串在某个样式下的尺寸(以下因素均可能影响结果:文本是否多行、字体、字号、行高)
Parameters
Name | Type | Description |
---|---|---|
text | string | string [] | - |
style | Style | - |
lineCount | number | text的行数 |
defaultFont? | string | - |
Returns
Object
Name | Type |
---|---|
width | number |
height | number |
lineHeight | number |