yicangzongtai_app_240321/uni_modules/sakura-canvas/js_sdk/methods/triangle.js

/**
 * 绘制三角形
 */
export default class DrawTriangle {
	constructor(params) {
		const { Context, commonUtilMethods, commonDrawMethods } = params
		this.Context = Context
		this.commonUtilMethods = commonUtilMethods
		this.commonDrawMethods = commonDrawMethods
	}
	/**
	 * 获取绘制参数
	 * @param { Object } params 参数
	 * @param { Boolean } conversion 是否需要转换单位
	 */
	getDrawParams(params = {}, conversion = true) {
		const globalDataParams = this.commonUtilMethods.getGlobalDataDrawParams(params)
		// 绘制三角形的参数
		const { coordinate = [], drawType = 'isosceles', direction = 'top' } = params
		const triangleParams = {
			...globalDataParams,
			// 当绘制类别是自定义的时候需要传递的参数
			coordinate,
			// 绘制三角形的类型
			// right: 直角三角形
			// isosceles: 等腰三角形
			// custom: 自定义时，x, y, 宽, 高都不需要传递。需要传递绘制点的坐标类型是数组(coordinate)
			// [[1, 3], [2, 3], [4, 5]]
			drawType,
			// 三角形顶点朝向 top, left, right, bottom
			direction,
		}
		return conversion ? this.commonUtilMethods.conversionUnit(triangleParams) : triangleParams
	}
	/**
	 * 绘制三角形
	 * @param { Object } params 矩形参数
	 * @param { Boolean } conversion 是否需要转换单位
	 */
	draw(params = {}, conversion = true) {
		const { Context, commonUtilMethods, commonDrawMethods } = this
		const { canvasWidth, is2d } = commonUtilMethods
		let { 
			x, y, w, h, color, alpha, isFill, lineWidth, drawType, offsetRight,
			coordinate, rotate, windowAlign, direction, borderWidth, borderColor, drawImage
		} = this.getDrawParams(params, conversion)
		if (color === 'black' && drawImage) {
			color = 'none'
		} else if(color === 'black') {
			color = '#ffffff'
		}
		if (windowAlign !== 'none' && drawType != 'custom') {
			x = commonDrawMethods.computedCenterX(canvasWidth, w, windowAlign, offsetRight)
		}
		if (rotate.deg && drawType !== 'custom') {
			Context.save()
			commonDrawMethods.setTriangleRotate(x, y, w, h, rotate, drawType)
		}
		Context.beginPath()
		commonDrawMethods.setAlpha(alpha)
		if (drawType === 'isosceles') {
			switch (direction) {
				case 'top':
					Context.lineTo(x + w / 2, y)
					Context.lineTo(x, y + h)
					Context.lineTo(x + w, y + h)
					break
				case 'bottom':
					Context.lineTo(x, y)
					Context.lineTo(x + w, y)
					Context.lineTo(x + w / 2, y + h)
					break
				case 'right':
					Context.lineTo(x, y)
					Context.lineTo(x, y + h)
					Context.lineTo(x + w, y + h / 2)
					break
				case 'left':
					Context.lineTo(x + w, y)
					Context.lineTo(x + w, y + h)
					Context.lineTo(x, y + h / 2)
					break
			}
		} else if (drawType === 'right') {
			switch (direction) {
				case 'top':
					Context.lineTo(x, y)
					Context.lineTo(x, y + h)
					Context.lineTo(x + w, y + h)
					break
				case 'bottom':
					Context.lineTo(x, y)
					Context.lineTo(x + w, y)
					Context.lineTo(x, y + h)
					break
				case 'left':
					Context.lineTo(x, y)
					Context.lineTo(x, y + h)
					Context.lineTo(x + w, y)
					break
				case 'right':
					Context.lineTo(x, y + h)
					Context.lineTo(x + w, y + h)
					Context.lineTo(x + w, y)
					break
			}
			
		} else if (drawType === 'custom') {
			for (let i of coordinate) {
				Context.lineTo(i[0], i[1])
			}
		}
		Context.closePath()
		if (isFill) {
			if (borderWidth !== 0) {
				commonDrawMethods.setLineWidth(borderWidth)
				commonDrawMethods.setStrokeStyle(borderColor)
				Context.stroke()
			}
			if (!drawImage || (drawImage && color !== 'none')) {
				commonDrawMethods.setFillStyle(color)
				Context.fill()
			}
		} else {
			commonDrawMethods.setLineWidth(lineWidth)
			commonDrawMethods.setStrokeStyle(color)
			Context.stroke()
		}
		commonDrawMethods.setAlpha(1)
		if (rotate.deg && drawType !== 'custom') {
			Context.restore()
		}
	}
}