对课程最好的支持:看到底,去分享,点在看,谢谢!
第十章 简易画图
视频加载失败,请刷新页面重试
刷新1、理解绘制点、线、面的逻辑,以及HTML、CSS和JavaScript实现水质点、线、面的基础方法;
2、学习
3、理解图层和将
1、掌握点、线、面的基本构成和绘制理念;
2、掌握基于图层的图形绘制方法;
3、掌握的使用方法,尤其注意
1、构建基本操作框架,包括绘制会图框,画点、画线、画面、清除等按钮,还有坐标和当前功能状态等;
2、设计样式,确定基本形式,包括底图说地图等;
3、实现鼠标移动动态显示坐标功能,包括设置坐标显示控件,鼠标移动事件等;
4、实现点线面和清除按钮转变使用状态的功能,即点击按钮,使用状态进行相应改变,初始状态为准备,点击清除按钮后状态也为准备;
5、实现画点功能,包括声明并实例化相关控件,设置尺寸、绘图环境、鼠标按下事件和绘制点方法,方法过程包括:开始绘制、点样式、笔触的颜色、执行绘制;
6、实现画线功能,包括设置草图图层,状态判断、鼠标按下事件、双击事件以及坐标变化等,具体画线过程包括:开始路径记录、开始点、过程点、结束路径、线宽度、笔触颜色、实际绘制等;
7、弹簧线的实现,在草图图层里绘制虚线,移动一次先擦除上一次的线,清除的过程包括开始路径,清除矩形设置,实际绘制等;
8、实现画面功能。画面的逻辑是记录所有节点,清除已经的画好的边线,重新绘制面。包括设置临时边框层,状态判断、鼠标按下事件、双击事件以及坐标变化等,具体画面方法包括:记录所有节点,判断节点是否大于等于3,开始路径,开始点,循环所有节点,结束路径,设置填充、笔触类型、线宽,进行填充,实际绘制,最终清除临时边框;
9、清除按钮的实现,清空所有图层,清除的过程包括开始路径,清除矩形设置,实际绘制等。
1、Windows10操作系统专业版;
2、HBuilderX编程工具;
3、Chrome浏览器。
和前几章不同,本章主要介绍绘制图形的逻辑,等同于GIS绘制图形的最基本逻辑。本次课就是模式GIS的底层逻辑,实现绘制点、线、面的功能,以及讲解和实现图层设置、清除、弹簧线、坐标等概念。最核心的目的就是要理解GIS绘制要素实体的底层逻辑,以及图层和要素、要素和要素、要素和样式之间的关系和各自作用。本章结果如图:
图3-10-1简易画图
1、原理介绍
(1)
HTML为用户画图需求专门设置
(2)鼠标事件
当画图时,要通过不同的鼠标动作事件,触发不同的功能。因此就要对鼠标的各种事件进行捕捉,JavaScript的鼠标事件有很多,本章重点介绍鼠标移动(onmousemove)、按下(onmousedown)、双击事件(ondblclick)。
鼠标指针移动事件就是当鼠标移动时所触发的功能,具体事件功能语法如下:
实例化的标签变量.onmousedown = function(e){} |
这里的e变量包含光标的坐标值,本章具体使用的是e.layerX(X坐标),e.layerY(Y坐标)。其他鼠标事件也类似如下:
鼠标按下事件的语法:
实例化的标签变量. onmousedown = function(e){} |
鼠标双击事件的语法:
实例化的标签变量. ondblclick = function(e){} |
(3)实时坐标显示
根据鼠标移动事件,可以出发实时获取指针位置信息,并赋值给坐标标签的innerHTML属性,进而实现实时显示坐标的原理。这也是GIS坐标实现的原理。
(4)
首先实例化
(5)画点的原理
当鼠标移动到某一位置时,按下鼠标左键,可以出发鼠标按下事件,触发
(6)画线的原理
首先通过鼠标按下事件,点下线的第一个节点,作为首节点。当点下第二个节点时,作为尾节点,画一条线。然后将第二节点的坐标更新为第一个节点,作为首节点,再点击画出第三个节点时,作为尾节点,再画一条线。一次类推,当双击时,结束画线。
(7)弹簧线的原理
为了增加用户体验,可以在首节点,和鼠标指针之间画一条虚线。但是这条虚线应画在草图图层,同时每画一次之前,就采用clearRect()方法清除上一次所画的虚线。这样就有了一条一头固定,另一头随着鼠标指针随时移动的虚线。当鼠标点击事件时,弹簧线的首节点,就应更换为现有坐标,同时把刚才绘制的虚线清除掉。
(8)画面的原理
当点下第一个点时,最为面的首节点,并将坐标数组作为元素,记录在一个动态数组里。然后开始有第一条弹簧线,跟随鼠标指针移动。档点下第二个点时,在面的临时边框图层中画下一根边框线,同时将第二个点的坐标数组存入动态数组中。当有两个以上节点时,弹簧线要有两条,一条是鼠标指针和现有节点的弹簧线,另外一条是鼠标指针与第一个节点之间的弹簧线。直到双击结束画面时,执行
首先判断现有节点是否大于等于3个,如果是就开始画面,如果不是就不执行画面方法。画面方法首先是开始记录路径,然后设置首节点,然后历遍节点数组,不断绘制图形节点,绘制完成后结束路径采集。接下来设置图形样式,包括填充,笔触颜色,轮廓线粗细等,执行fill()方法,最后进行实际绘制。绘制完成后清除草图图层中的图形和临时边框图层中所有的图形,完成面的绘制。
(9)清除的原理
在判断画线、画面的第一个和第二个点时,都需要有些标志,清除时首先都要恢复初始值。然后各个图层都要执行clearRect()方法。最后状态栏中的状态要变为准备。
2、功能布局
(1)声明并实例化部分
为了让功能实现更够层次和逻辑,声明各图层标签、坐标标签、状态标签、面节点数组、画线画面的标志开关,以及首节点和尾节点开关。
图层标签使用
var图层变量=document.getElementById(“ var绘图环境变量=图层变量.getContext(“2d”); |
需要注意的是,控制弹簧线的节点开关。画线时需要确定是否为首次绘制第一个点,如果是不显示弹簧线,如果不是,要显示弹簧线。画面时,要确定没有点、第一个点、第二个点,如果是没有点不显示弹簧线。如果是第一个点显示一条弹簧线,如果是两个点,显示两条弹簧线,分别是鼠标指针到第一个点的弹簧线,和鼠标指针到最后一个点的弹簧线。
(2)鼠标事件布局
根据实时坐标和绘制点、线、面的需要,需要布置onmousemove(鼠标移动)、onmousedown(鼠标按下)和ondblclick(双击)三个功能事件。时间中需要首先获取e变量的layerX和layerY值,其次要使用switch方法判断当先所要执行的绘制工作是点、线、面的哪一项。具体语法如下:
图层变量.鼠标事件=function(e){ x=e.layerX; y=e.layerY; switch (画图状态){ } } |
(3)绘制部分
画点语法如下:
绘图环境变量.beginPath();//开始记录路径。 绘图环境变量.arc(X坐标,Y坐标,半径,起始角度,结束角度); //以圆形代替点。 绘图环境变量.closePath();//结束记录路径。 绘图环境变量.strokeStyle=色值; //设置笔触颜色。 绘图环境变量.stroke();//实际绘制图形。 |
画线语法如下:
绘图环境变量.beginPath();//开始记录路径。 绘图环境变量.moveTo(x0,y0);//确定起始节点坐标。 绘图环境变量.lineTo(x1,y1); //确定下一个节点坐标,可以多次重复。 绘图环境变量.closePath();//结束记录路径。 绘图环境变量.lineWidth = 1;//设置线宽度; 绘图环境变量.strokeStyle=色值; //设置笔触颜色。 绘图环境变量.stroke();//实际绘制图形。 |
画面语法
绘图环境变量.beginPath();//开始记录路径。 绘图环境变量.moveTo(x0,y0);//确定起始节点坐标。 绘图环境变量.lineTo(x1,y1); //确定下一个节点坐标。 绘图环境变量.lineTo(x2,y3); //确定下一个节点坐标,可以多次重复,三个点以上才能确定面。 绘图环境变量.closePath();//结束记录路径。 绘图环境变量. fillStyle =色值;//设置填充颜色; 绘图环境变量.strokeStyle=色值; //设置笔触颜色。 绘图环境变量.lineWidth = 1;//设置线宽度; 绘图环境变量.fill();//进行填充; 绘图环境变量.stroke();//实际绘制图形。 |
(4)控制部分
无论是画点、画线、还是画面,首先就是要判定当前状态;
其次,当画线时,在没有点之前需要没有反应。当鼠标按下第一点时,要记录当前点坐标,作为首节点,同时开启弹簧线开关。这时始终就有一个鼠标指针和首节点之间的弹簧线。当鼠标点下第二点时,要画一条实际的线,清除当前弹簧线,将第二点的坐标变为首节点,与鼠标指针形成新的弹簧线。具体代码案例入下:
if((zt==”画线“)){ if(dy){ dchatu(x,y); fx=x; fy=y; }else{ dy=true; fx=e.layerX; fy=e.layerY; } } |
画面时比画线时多了第二点判断,因为第一个点判断是画一条弹簧线,记录初始节点。第二点判断要同时画两条弹簧线。同时面的边框应为临时边框,画面的时候要通过数组记录每一个节点坐标,双击结束画面时,清除弹簧线和临时边框,通过坐标数组从新绘制一个面。最后绘制面之前,一定要判定一下数组中是否为3个和3个以上节点,如果是就画面。案例代码如下:
if((zt==”画面“)){ if(mw){ dchatu(x,y); fx=x; fy=y; mt=true; shuzuchuli(x,y) }else{ mw=true; fx=x; fy=y; fx1=x; fy1=y; shuzuchuli(x,y); } } |
(5)弹簧线部分
弹簧线部分包括绘制、清除和实时清除三个部分。绘制部分与画线部分理念相同,党史多一个是否是画面时第二点的判断,如果是就画一条从当点点坐标,到鼠标指针,再到第一点坐标的折线。具体语法如下:
绘图环境变量.beginPath();//开始记录路径。 绘图环境变量.clearRect(0,0,宽度,高度);//清除以前绘制图形,全尺寸清除; 绘图环境变量.moveTo(fx,fy);//当前或者最后一个节点的位置; 绘图环境变量.lineTo(x,y);//鼠标指针位置; if(第二点判定变量的值){//判断是否是面的第二个节点,如果是就添加一个首节点。 绘图环境变量.lineTo(fx1,fy1); } 绘图环境变量.setLineDash([5,5]);//设置成弹簧想为虚线,第一个值为短线长度,第二个值为间隔长度; 绘图环境变量.lineWidth = 1; //设置线宽度; 绘图环境变量.strokeStyle=色值; //设置笔触颜色。 绘图环境变量.stroke();//实际绘制图形。 |
(6)数组部分
画面的数组应该是二维数组,数组每个元素应该是由坐标的x,y两个值组成。需要注意的是数组要全局变量,每次双击后(结束画面),都要重新实例化数组。具体语法语法如下:
数组实例化:
var数组变量= new Array(); |
数组添加节点元素:
var元素变量=[x, y]; 数组变量.push(元素变量); |
3、代码具体结构
声明部分:
状态部分:
鼠标事件部分:
绘图部分:
判断部分:
数组部分:
注意:鼠标移动事件对应的是弹簧线功能,鼠标按下和双击对应的绘图功能。 |
1、设定HTML标签,包括绘图图层、临时边框层、草图图层,以及画点按钮、画线按钮、画面按钮、清除按钮,还包括坐标标签和状态标签等部分。需要注意的是,图层标签要设定宽度和高度;
2、设定各标签样式,可以为绘图图层设置底图图片。重点是要让三个图层进行叠加,要定位为绝对定位position: absolute;;
3、构建所需要的变量并实例化;
4、利用鼠标移动事件实现坐标的实时变化;
5、实现各个按钮的状态转化功能;
6、利用鼠标按下事件实现画点;
7、实现画线,需要利用switch方法确定画线还是画点,利用双击结束画线;
8、实现弹簧线功能,设置画线第一点开关;
9、实现画面和双弹簧线功能,在鼠标双击事件中利用switch方法确定画线还是画面;
10、实现画面双弹簧线功能,设置画面第一点和第二点开关。
1、
2、设定区域变量的方法如下:
方法 | 功能 |
beginPath | 开始记录路径。 |
arc | 绘制图形,尤其是圆形。 |
moveTo | 设定路径的初始点位 |
lineTo | 设置节点坐标 |
closePath | 结束记录路径。 |
fill | 填充面。 |
stroke | 实际绘制。 |
clearRect | 清除矩形 |
3、区域变量的属性如下:
方法 | 功能 |
strokeStyle | 笔触颜色。 |
lineWidth | 线宽。 |
fillStyle | 填充样式。 |
4、鼠标事件包括:onmousemove(鼠标移动)、onmousedown(鼠标按下)和ondblclick(双击);
5、图层要进行叠加,一层负责实际绘制,一层负责临时绘制,如果有多种样式出现,例如边框,就需要再加一个临时图层;
6、弹簧线,是指上一位置和鼠标指针之间的一条连接线。其效果的实现,是在画线前,先清除原有的线,再画出新线;
7、画线时需要一根弹簧线即可,但是画面时需要鼠标指针和最初节点,以及鼠标指针和最后节点两条弹簧线;
8、在标签中设置背景图的CSS语句如下:
background-image: url();//设置背景图,url中为背景图片地址; background-size: contain;//设置背景图的平铺方式为拉伸适应标签。 |
注意:background-size属性值为Cover时,表示图片最大尺寸覆盖标签。
9、判断状态的switch语法如下:
switch (状态值){ case “画点“: 画点方法; break; } |
10、点、线、面常用的表达是:point、line、polygon;
1、尝试利用clearRect方法开发橡皮擦功能。
2、尝试利用数组开发退点撤销功能。
简易画图
— End of Course —
历史课程
ArcGIS API for JavaScript开发
零基础入门,可开发应用程序
15年教学积累
帮助学生快速入门
解决身边问题
非常感谢您,点一下在看?
暂无评论内容