<uniapp><指针组件>基于uniapp,编写一个自定义箭头指针组件

前言

本专栏是关于uniapp的相关介绍,如果你对uniapp感兴趣,不妨来看看。

环境配置

系统:windows10

平台:HBuilderX4.76

语言:vue、javascript

库:uni

概述

本文是基于uniapp,编写一个自定义组件,一个直线带箭头的指针组件,效果图如下:

1、组件简介

这个组件的功能就是生成一个带箭头的直线指针,可以设置长度、颜色、角度等参数,内部是使用了svg封装的,之所以要写这样的组件,是因为我为了实现时钟的效果,想着添加时针、秒针这样的元素,而且为了模拟时钟,秒针还需要每秒变化,效果如下:

所以想着,为了方便调用,将指针单独写成一个组件,这样不仅制作秒针等场景时可以使用,如果有其他场景,需要这样的一个指针,也可以直接调用。

2、组件实现

如上所述,组件内部就是一个svg,分为两部分,直线、箭头。

我们先来看下内部svg的结构:

1、箭头部分

箭头部分即marker包裹的内容,箭头当然可以是任意形状,但我们此处使用的是比较通用的三角形箭头,箭头包括了图形的长度、宽度、顶点坐标等,如下:

js 复制代码
<marker
					id="arrow"
					:markerWidth="10"
					:markerHeight="10"
					:refX="9"
					:refY="5"
					orient="auto"
				>
					<polygon points="0 0,10 5,0 10" fill="#000000"></polygon>
				</marker>

不过,我们可以将这些参数用变量来表示,我们设置三种规格的箭头:small、normal、big,通过属性markerMode来选择:

js 复制代码
//根据模式选择marker配置
	const getMarkerConfig = (mode)=>{
		const config = {
			small: { id:'small', markerWidth:6,  markerHeight:6,   refX:5,  refY:3,   },
			normal:{ id:'normal', markerWidth:10, markerHeight:10,  refX:9,  refY:5,   },
			big:   { id:'big', markerWidth:15, markerHeight:15,  refX:14,  refY:7.5,},
		};
		return config[mode] || config.normal;
	};
	const polygonPoints= computed(()=>{
		if (props.markerMode === 'normal'){
			return "0 0,10 5,0 10"
		} else if(props.markerMode === 'small'){
			return "0 0,6 3,0 6"
		} else if(props.markerMode == 'big'){
			return "0 0,15 7.5,0 15"
		} else{
			return "0 0,10 5,0 10"
		}
		
	});

如上,我们添加getMarkerConfig函数来根据mode返回不同配置,然后我们使用v-bind绑定它:

js 复制代码
<marker 
						v-bind="getMarkerConfig(props.markerMode)"
						orient="auto"
					>
						<polygon :points="polygonPoints" fill="#000000" />
					</marker>

这样,我们调用组件时,只需要设置markerMode即可:

js 复制代码
<linePointer
						:startP="startP"
						:lineDistance="100"
						lineColor="#55aaff"
						:isDashed="true"
						markerMode="big"
					></linePointer>

箭头效果:

2、直线部分

直线部分用于渲染直线,先看结构:

js 复制代码
	<line
					:x1="xx1"
					:y1="yy1"
					:x2="xx2"
					:y2="yy2"
					:stroke-width="lineWidth"
					:stroke="lineColor"
					:stroke-dasharray="isDashed? '10,5' : 'none'"
					:marker-end="`url(#${props.markerMode})`"
					>
				</line>

要显示直线,需要知道直线的起点、终点,还需要设置直线的宽度、颜色、是否虚线,marker-end是将箭头添加到直线末端。(也可以在起始端添加箭头,但本组件不使用),双箭头效果:

我们为组件设置属性:起点坐标、长度,然后来计算终点坐标:

js 复制代码
const angle = computed(()=>{
		if(!props.lineAngle) return 0;
		return props.lineAngle;
	});
	const rad = computed(()=>{
		return (angle.value * Math.PI) / 180
	});
	const distance = computed(()=>{
		if(!props.lineDistance) return 100;
		return props.lineDistance
	});
const xx2 = computed(()=>{
		return (xx1.value + distance.value * Math.cos(rad.value))
	});
	const yy2 = computed(()=>{
		return (yy1.value + distance.value * Math.sin(rad.value))
	});

使用计算属性,可以自动响应变化。

看一下演示效果:

相关推荐
你的电影很有趣22 分钟前
lesson77:Vue组件开发指南:从基础使用到高级通信
javascript·vue.js·1024程序员节
Mr.Jessy42 分钟前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
oak隔壁找我1 小时前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
社会底层无业大学生2 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
烟袅2 小时前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript
烟袅2 小时前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
mapbar_front3 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
W.Buffer4 小时前
设计模式-单例模式:从原理到实战的三种经典实现
开发语言·javascript·单例模式
Mintopia5 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia5 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节