# 像素线
# 创建像素线
使用引擎（Engine）的createPixelLine接口创建像素线。
// 创建像素线
const entity = engine.createPixelLine( {
lineJoin: 'miter',
isClosed: true,
width: 14,
color: '#11EE11',
outline: true,
outlineWidth: 2,
flowSpeed: 1.0,
map: './assets/textures/arrow.png',
coordinates: [
[ -260.0, 0.1, -150.0 ],
[ -230.0, 0.1, -150.0 ],
[ -230.0, 0.1, -100.0 ],
[ -160.0, 0.1, -140.0 ],
[ -160.0, 0.1, -300.0 ],
[ -200.0, 0.1, -300.0 ],
[ -200.0, 0.1, -230.0 ],
[ -260.0, 0.1, -230.0 ]
]
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
提示
像素线创建参数，详见PixelLineParameters。
注意
初始化时，如果不设置颜色参数或将颜色参数设置为null，则渲染时不会使用颜色进行混合。例如，只显示纹理不混合颜色，可以通过这种方式实现。
# 像素线属性
提示
像素线使用PixelLine组件渲染，更新属性或调用接口时需要先获取矢量点渲染组件。
import { PixelLine } from '@tx3d/core';
// 获取像素线渲染组件
const pixelLine = entity.getComponent( PixelLine );
1
2
3
4
2
3
4
🌏 width 宽度（单位：像素）
// 获取像素线宽度
const width = pixelLine.width;
// 设置像素宽度
pixelLine.width = 32;
1
2
3
4
5
2
3
4
5
🌏 color 颜色
// 获取像素线颜色
const color = pixelLine.color;
// 设置像素线颜色
pixelLine.color = "#ff00de";
// 取消颜色混合
pixelLine.color = null;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
注意
如果将颜色设置为null，则会取消颜色混合。
🌏 outline 描边可见性控制
// 获取像素线描边可见性
const outline = pixelLine.outline;
// 设置像素线描边可见性
pixelLine.outline = true;
1
2
3
4
5
2
3
4
5
🌏 outlineWidth 描边宽度（单位：像素）
// 获取像素线描边宽度
const outlineWidth = pixelLine.outlineWidth;
// 设置像素线描边宽度
pixelLine.outlineWidth = 2.0;
1
2
3
4
5
2
3
4
5
🌏 outlineColor 描边颜色
// 获取像素线描边颜色
const outlineColor = pixelLine.outlineColor;
// 设置像素线描边颜色
pixelLine.outlineColor = '#ff0000';
1
2
3
4
5
2
3
4
5
🌏 opacity 透明度
// 获取像素线透明度
const opacity = pixelLine.opacity;
// 设置像素线透明度
pixelLine.opacity = 0.75;
1
2
3
4
5
2
3
4
5
🌏 occluded 是否可遮挡
// 获取像素线是否可遮挡
const occluded = pixelLine.occluded;
// 设置像素线是否可遮挡
pixelLine.occluded = false;
1
2
3
4
5
2
3
4
5
🌏 flowSpeed 箭头流动速度
// 获取像素线箭头流动速度
const flowSpeed = pixelLine.flowSpeed;
// 设置像素线箭头流动速度
pixelLine.flowSpeed = 5.0;
1
2
3
4
5
2
3
4
5
🌏 points 点坐标数组，只读。
// 获取像素线节点坐标数组
const points = pixelLine.points;
1
2
2
🌏 length 线长度，只读。
// 获取像素线总长度
const length = pixelLine.length;
1
2
2
# 像素线接口
🌏 setStencil 设置模板参数
import { GreaterEqualStencilFunc, ReplaceStencilOp } from 'three';
// 设置模板参数
pixelLine.setStencil( {
stencilWrite: true, // 开启模板比较
stencilRef: 1.0, // 模板比较基准值
stencilFunc: GreaterEqualStencilFunc, // 模板比较方法
stencilZPass: ReplaceStencilOp // 模板比较和深度比较都成功时操作
} );
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
提示
模板参数，详见StencilParameters。
🌏 updateCoordinates 更新像素线坐标
// 更新像素线坐标
pixelLine.updateCoordinates( [
[ 100.0, 0.0, 0.0 ],
[ 120.0, 0.0, 100.0 ],
[ 130.0, 0.0, 50.0 ]
] );
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8