Laya 3D 画线

使用Laya的 PixelLineSprite3D 像素线渲染精灵，画出来的线条不能调整粗细。目前想到的是通过，多画一些线条，使看起来的线条变粗。最终解决办法是，将线段的起点和线段的终点，扩城圆。用生活的例子举例，就是，拿个圆环在沙子上拖，最终拖出来的效果。画出来的效果如下图所示。

源码

/**

* 圆形画笔(适用用于 X Z平面)

* by leo

*/

export default class CirclePaint {

/**线段数组 */

private _lineSprite3Ds: Array<Laya.PixelLineSprite3D> = null;

/**线段起点 */

private _starVec3: Laya.Vector3 = null;

/**线段终点 */

private _endVec3: Laya.Vector3 = null;

/**加宽线数量 */

private _lineNum: number = 100;

/**笔刷半径 */

private _paintRadius: number = 0;

/**每条线 的最大线段数量 */

private _perLineMaxCount: number = 0;

/**圆上 两点之间的间隔角度 */

private _perAngle: number = 0;

 

/**

* 销毁函数

*/

public destroy(): void {

if (this._lineSprite3Ds) {

for (let piexlSprite3D of this._lineSprite3Ds) {

if (piexlSprite3D) {

piexlSprite3D.clear();

piexlSprite3D.removeSelf();

piexlSprite3D.destroy();

piexlSprite3D = null;

}

}

this._lineSprite3Ds.splice(0, this._lineSprite3Ds.length);

this._lineSprite3Ds = null;

}

}

 

/**

* 设置画笔

* @param parent 线段父对象

* @param lineNum 加宽线数量

* @param perLineMaxCount 每条线，最大线段数量

* @param radius 笔刷半径

*/

public setPaint(parent: Laya.Sprite3D, lineNum: number, perLineMaxCount: number, radius: number): void {

this._paintRadius = radius;

this._lineNum = lineNum;

this._perLineMaxCount = perLineMaxCount;

this._perAngle = 360 / lineNum;

this._lineSprite3Ds = new Array<Laya.PixelLineSprite3D>();

for (let i = 0; i < this._lineNum; i++) {

let pixelSprite3D = new Laya.PixelLineSprite3D(perLineMaxCount);

parent.addChild(pixelSprite3D);

this._lineSprite3Ds.push(pixelSprite3D);

}

this._starVec3 = new Laya.Vector3();

this._endVec3 = new Laya.Vector3();

}

 

/**

* 画线

* @param lastVec3 线段起点

* @param nextVec3 线段结束点

* @param color 颜色

*/

public drawLine(lastVec3: Laya.Vector3, nextVec3: Laya.Vector3, color: Laya.Color): void {

if (this._lineSprite3Ds) {

for (let index = 0; index < this._lineSprite3Ds.length; index++) {

let line = this._lineSprite3Ds[index];

if (line != null) {

this.setCircleVec3(lastVec3, this._starVec3, index);

this.setCircleVec3(nextVec3, this._endVec3, index);

// 项目需要限制高度，遮挡，去掉无影响

this._starVec3.y = 0.04;

this._endVec3.y = 0.04;

line.addLine(this._starVec3, this._endVec3, color, color);

}

}

}

}

 

/**

* 清理画线

*/

public clearLine(): void {

if (this._lineSprite3Ds) {

for (let piexlSprite3D of this._lineSprite3Ds) {

if (piexlSprite3D) {

piexlSprite3D.clear();

}

}

}

}

 

/**

* 线段数量是否超过限制

*/

public isMaxLineCount(): boolean {

let lineSp = this._lineSprite3Ds[0];

if (lineSp && lineSp.lineCount >= lineSp.maxLineCount) {

return true;

}

return false;

}

 

/**

* 最大线段数量

*/

public get maxLineCount(): number {

return this._perLineMaxCount;

}

 

/**

* 圆上的点

* @param centerVec3 中心点

* @param tagetVec3 圆上的点，

* @param index 下标

*/

private setCircleVec3(centerVec3: Laya.Vector3, tagetVec3: Laya.Vector3, index: number) {

let angle = this._perAngle * index * Math.PI / 180;

let xdis = Math.sin(angle) * this._paintRadius;

let zdis = Math.cos(angle) * this._paintRadius;

tagetVec3.x = centerVec3.x + xdis;

tagetVec3.y = centerVec3.y;

tagetVec3.z = centerVec3.z + zdis;

}

}