第十章简易画图

对课程最好的支持:看到底,去分享,点在看,谢谢!

第十章 简易画图

视频加载失败,请刷新页面重试

刷新

1、理解绘制点、线、面的逻辑,以及HTMLCSSJavaScript实现水质点、线、面的基础方法;

2、学习标签的使用方法、特点和基本操作;

3、理解图层和将标签作为多图层使用的理念。

1、掌握点、线、面的基本构成和绘制理念;

2、掌握基于图层的图形绘制方法;

3、掌握的使用方法,尤其注意标签与其他标签使用的不同。

1、构建基本操作框架,包括绘制会图框,画点、画线、画面、清除等按钮,还有坐标和当前功能状态等;

2、设计样式,确定基本形式,包括底图说地图等;

3、实现鼠标移动动态显示坐标功能,包括设置坐标显示控件,鼠标移动事件等;

4、实现点线面和清除按钮转变使用状态的功能,即点击按钮,使用状态进行相应改变,初始状态为准备,点击清除按钮后状态也为准备;

5、实现画点功能,包括声明并实例化相关控件,设置尺寸、绘图环境、鼠标按下事件和绘制点方法,方法过程包括:开始绘制、点样式、笔触的颜色、执行绘制

6、实现画线功能,包括设置草图图层,状态判断、鼠标按下事件、双击事件以及坐标变化等,具体画线过程包括:开始路径记录、开始点、过程点、结束路径、线宽度、笔触颜色、实际绘制等;

7、弹簧线的实现,在草图图层里绘制虚线,移动一次先擦除上一次的线,清除的过程包括开始路径,清除矩形设置,实际绘制等;

8、实现画面功能。画面的逻辑是记录所有节点,清除已经的画好的边线,重新绘制面。包括设置临时边框层,状态判断、鼠标按下事件、双击事件以及坐标变化等,具体画面方法包括:记录所有节点,判断节点是否大于等于3,开始路径,开始点,循环所有节点,结束路径,设置填充、笔触类型、线宽,进行填充,实际绘制,最终清除临时边框;

9、清除按钮的实现,清空所有图层,清除的过程包括开始路径,清除矩形设置,实际绘制等。

1Windows10操作系统专业版;

2HBuilderX编程工具;

3Chrome浏览器。

和前几章不同,本章主要介绍绘制图形的逻辑,等同于GIS绘制图形的最基本逻辑。本次课就是模式GIS的底层逻辑,实现绘制点、线、面的功能,以及讲解和实现图层设置、清除、弹簧线、坐标等概念。最核心的目的就是要理解GIS绘制要素实体的底层逻辑,以及图层和要素、要素和要素、要素和样式之间的关系和各自作用。本章结果如图:

3-10-1简易画图

1、原理介绍

1标签

HTML为用户画图需求专门设置标签,用于满足类似于Windows实现类似画笔的功能。标签其实就是绘制图形的载体,可以理解为画板。我们可以通过鼠标在画板上任意画出所需要的图形。当多个标签叠加使用时,可以类比GIS图层的概念。需要注意的是,标签绘制的都是栅格图形,和GIS中的矢量数据有所区别。同时标签具有CSS样式的特殊性,需要在标签中设定宽度,通过JavaScript进行宽度的设定。

2)鼠标事件

当画图时,要通过不同的鼠标动作事件,触发不同的功能。因此就要对鼠标的各种事件进行捕捉,JavaScript的鼠标事件有很多,本章重点介绍鼠标移动(onmousemove)、按下(onmousedown)、双击事件(ondblclick)。

鼠标指针移动事件就是当鼠标移动时所触发的功能,具体事件功能语法如下:

实例化的标签变量.onmousedown  = function(e){}

这里的e变量包含光标的坐标值,本章具体使用的是e.layerXX坐标),e.layerYY坐标)。其他鼠标事件也类似如下:

鼠标按下事件的语法:

实例化的标签变量. onmousedown  = function(e){}

鼠标双击事件的语法:

实例化的标签变量.  ondblclick = function(e){}

3)实时坐标显示

根据鼠标移动事件,可以出发实时获取指针位置信息,并赋值给坐标标签的innerHTML属性,进而实现实时显示坐标的原理。这也是GIS坐标实现的原理。

4标签画图原理

首先实例化标签,并采用beginPath()方法指示标签开始记录路径点位。如果是画预制的图形或者点,采用arc()方法。如果是画线和面,就要采用moveTo(x,y)方法记录起始点,通过lineTo(x,y)方法记录路径经过的节点,最后采用closePath()方法结束记录路径。接下来设置图形样式,最终采用stroke()方法进行实际绘制。

5)画点的原理

当鼠标移动到某一位置时,按下鼠标左键,可以出发鼠标按下事件,触发标签绘图方法,既可以绘制出一个点。这里需要注意的是,虽然我们绘制的是一个点,但是图形表达上需要用一个面来代替。很符合点的实际逻辑。本章我们用一个半径很小的圆形来表示。

6)画线的原理

首先通过鼠标按下事件,点下线的第一个节点,作为首节点。当点下第二个节点时,作为尾节点,画一条线。然后将第二节点的坐标更新为第一个节点,作为首节点,再点击画出第三个节点时,作为尾节点,再画一条线。一次类推,当双击时,结束画线。

7)弹簧线的原理

为了增加用户体验,可以在首节点,和鼠标指针之间画一条虚线。但是这条虚线应画在草图图层,同时每画一次之前,就采用clearRect()方法清除上一次所画的虚线。这样就有了一条一头固定,另一头随着鼠标指针随时移动的虚线。当鼠标点击事件时,弹簧线的首节点,就应更换为现有坐标,同时把刚才绘制的虚线清除掉。

8)画面的原理

当点下第一个点时,最为面的首节点,并将坐标数组作为元素,记录在一个动态数组里。然后开始有第一条弹簧线,跟随鼠标指针移动。档点下第二个点时,在面的临时边框图层中画下一根边框线,同时将第二个点的坐标数组存入动态数组中。当有两个以上节点时,弹簧线要有两条,一条是鼠标指针和现有节点的弹簧线,另外一条是鼠标指针与第一个节点之间的弹簧线。直到双击结束画面时,执行标签的绘图方法。

首先判断现有节点是否大于等于3个,如果是就开始画面,如果不是就不执行画面方法。画面方法首先是开始记录路径,然后设置首节点,然后历遍节点数组,不断绘制图形节点,绘制完成后结束路径采集。接下来设置图形样式,包括填充,笔触颜色,轮廓线粗细等,执行fill()方法,最后进行实际绘制。绘制完成后清除草图图层中的图形和临时边框图层中所有的图形,完成面的绘制。

9)清除的原理

在判断画线、画面的第一个和第二个点时,都需要有些标志,清除时首先都要恢复初始值。然后各个图层都要执行clearRect()方法。最后状态栏中的状态要变为准备。

2、功能布局

1)声明并实例化部分

为了让功能实现更够层次和逻辑,声明各图层标签、坐标标签、状态标签、面节点数组、画线画面的标志开关,以及首节点和尾节点开关。

图层标签使用标签,声明同时并使用getContext()方法设置绘图环境。对于本章整体技术而言,需要布置三个图层,包括草图图层、临时边框层和绘图层。具体语法如下:

var图层变量=document.getElementById(“标签id”);

var绘图环境变量=图层变量.getContext(“2d”);

需要注意的是,控制弹簧线的节点开关。画线时需要确定是否为首次绘制第一个点,如果是不显示弹簧线,如果不是,要显示弹簧线。画面时,要确定没有点、第一个点、第二个点,如果是没有点不显示弹簧线。如果是第一个点显示一条弹簧线,如果是两个点,显示两条弹簧线,分别是鼠标指针到第一个点的弹簧线,和鼠标指针到最后一个点的弹簧线。

2)鼠标事件布局

根据实时坐标和绘制点、线、面的需要,需要布置onmousemove(鼠标移动)、onmousedown(鼠标按下)和ondblclick(双击)三个功能事件。时间中需要首先获取e变量的layerXlayerY值,其次要使用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)数组部分

画面的数组应该是二维数组,数组每个元素应该是由坐标的xy两个值组成。需要注意的是数组要全局变量,每次双击后(结束画面),都要重新实例化数组。具体语法语法如下:

数组实例化:

var数组变量= new  Array();

数组添加节点元素:

var元素变量=[x, y];

数组变量.push(元素变量);

3、代码具体结构

声明部分:

绘制图层、草图图层、临时边框图层、状态变量、坐标变量、数组变量、当前坐标xy、起始点xy、画线第一点标志变量、画面第一点标志变量、画面第二点标志变量。

同时包括为各图层构建绘图区域变量var绘图区域变量=图层变量.getContext(“2d”);

状态部分:

画点按钮、画线按钮、画面按钮、清除按钮、坐标实例、状态实例

鼠标事件部分:

移动、按下、双击

绘图部分:

画点、画线、画面、画弹簧线

判断部分:

画线第一点判断、画面第一点判断、画面第二点判断

数组部分:

记录画面的每个节点

注意:鼠标移动事件对应的是弹簧线功能,鼠标按下和双击对应的绘图功能。

1、设定HTML标签,包括绘图图层、临时边框层、草图图层,以及画点按钮、画线按钮、画面按钮、清除按钮,还包括坐标标签和状态标签等部分。需要注意的是,图层标签要设定宽度和高度;

2、设定各标签样式,可以为绘图图层设置底图图片。重点是要让三个图层进行叠加,要定位为绝对定位position: absolute;

3、构建所需要的变量并实例化;

4、利用鼠标移动事件实现坐标的实时变化;

5、实现各个按钮的状态转化功能;

6、利用鼠标按下事件实现画点;

7、实现画线,需要利用switch方法确定画线还是画点,利用双击结束画线;

8、实现弹簧线功能,设置画线第一点开关;

9、实现画面和双弹簧线功能,在鼠标双击事件中利用switch方法确定画线还是画面;

10、实现画面双弹簧线功能,设置画面第一点和第二点开关。

1标签是用来模拟画笔功能的标签,主要方法为getContext(),实现绘制区域变量的设定;

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、点、线、面常用的表达是:pointlinepolygon

1、尝试利用clearRect方法开发橡皮擦功能。

2、尝试利用数组开发退点撤销功能。

简易画图

— End of Course —

历史课程

第一章 HTML基础

第二章 HTML基础标签

第三章 快速建站

第四章 CSS基础

第五章 定位和下拉菜单

第六章 响应式网页开发

第七章 初识JavaScript

第八章变量与运算

第九章 逻辑运算

ArcGIS API for JavaScript开发

零基础入门,可开发应用程序

15年教学积累

帮助学生快速入门

解决身边问题

非常感谢您,点一下在看👇

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容