Wechart Abstract Sketch by cax.
npm install skatch
极速渲染抽象派草图
js
const skatch = new Skatch({
randomRange: 10, //点的抖动范围
strokeRepeat: 12, //重复绘制的次数
strokeWidth: 1, //绘制线宽
strokeStyle: 'black',//绘制颜色
gap: 5, //填充线的间距
fillAngle: -45,//填充线的角度
curveRange: 45, //填充线扭曲范围
fillWidth: 1, //填充线的线宽
fillRepeat: 2,//填充线重复填充的次数
fillStyle: '#6aa8df',//填充线的颜色
filter: 1 //绘制 path 的时候过滤的比例,范围是 (0-1)
})
skatch.circle(310, 280, 50)
stage.add(skatch)
stage.update()
`
由于 skatch 是 cax 自定义 Element(继承自 cax.Group),所以拥有设置所有属性的能力,如下所示:
$3
|属性名 |描述 |
|---|---|
| x | 水平偏移 |
| y | 竖直偏移 |
| scaleX | 水平缩放 |
| scaleY | 竖直缩放 |
| rotation | 旋转 |
| skewX | 歪斜 X |
| skewY | 歪斜 Y |
| originX | 旋转基点 X |
| originY | 旋转基点 Y |
$3
|属性名 |描述 |
|---|---|
| alpha | 元素的透明度 |
注意这里父子都设置了 alpha 会进行乘法叠加。
$3
|属性名 |描述 |
|---|---|
| compositeOperation | 源图像绘制到目标图像上的叠加模式 |
注意这里如果自身没有定义 compositeOperation 会进行向上查找,找到最近的定义了 compositeOperation 的父容器作为自己的 compositeOperation。
$3
|属性名 |描述 |
|---|---|
| cursor | 鼠标移上去的形状 |
$3
|属性名 |描述 |
|---|---|
| fixed | 是否固定定位,默认是 false 设置成 true 不会叠加祖辈们的 transform 属性|
$3
|属性名 |描述 |
|---|---|
| shadow | 阴影|
使用方式:
`js
obj.shadow = {
color: '#42B035',
offsetX: -5,
offsetY: 5,
blur: 10
}
``