一个具有一些功能的网络画图板

前面讲了怎么去实现一个画线数据的传送，今天这个博文我将为大家分享一个具有一些特定功能的网络画图板

实现功能： 能改变颜色，画直线、圆形、矩形、随笔画

功能实现： 这些功能前面说了，是可以理解为不同的数据类型（STYLE）即给他的一个标识符，这样我们在传输数据的时候给这个数据附带一个TAG（报文头） 服务器接收到这个TAG后，根据它的数值来判断这个传输过来的数值类型是一个什么样的东西，然后执行什么样的接收方法，来接收什么样的数据；也就是前面说的一个约定的协议（即共识） 。

下面我们一个一个来分析功能的实现：

1、颜色识别的实现： 每一个图形的绘制，会有颜色，那么颜色是所有图形绘制所都需要的，那么可以在服务器接收客户机发送的数值时，第一个接收的数值是一个Color值，这样就获取到了客户机的默认颜色
2、不同绘图类型的实现： 比如我可以用字节类型的
1–>画直线
2–>画圆
3–>画矩形
4–>画随笔画
5–>清空（类似于橡皮擦的功能）
…
后续的功能大家还可以继续完善啊（比如画3D图形…）
3 各种类型数据的传输（我的实现方法）:
直线: 直线传输四个数据，起点的笛卡尔坐标和终点的笛卡尔坐标
矩形： 传输四个数据，即左上角顶点坐标和右下角顶点坐标
圆：传输四个数据，外界矩形左上角顶点坐标，和右下角顶点坐标
随笔画： 鼠标拖动，实时传送坐标数据（使用到MouseDragEvent）

这个传输协议的流程就是：

#mermaid-svg-mRJ8mNsn1nfn4H5z .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .label text{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .node rect,#mermaid-svg-mRJ8mNsn1nfn4H5z .node circle,#mermaid-svg-mRJ8mNsn1nfn4H5z .node ellipse,#mermaid-svg-mRJ8mNsn1nfn4H5z .node polygon,#mermaid-svg-mRJ8mNsn1nfn4H5z .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-mRJ8mNsn1nfn4H5z .node .label{text-align:center;fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .node.clickable{cursor:pointer}#mermaid-svg-mRJ8mNsn1nfn4H5z .arrowheadPath{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-mRJ8mNsn1nfn4H5z .flowchart-link{stroke:#333;fill:none}#mermaid-svg-mRJ8mNsn1nfn4H5z .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-mRJ8mNsn1nfn4H5z .edgeLabel rect{opacity:0.9}#mermaid-svg-mRJ8mNsn1nfn4H5z .edgeLabel span{color:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-mRJ8mNsn1nfn4H5z .cluster text{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-mRJ8mNsn1nfn4H5z .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-mRJ8mNsn1nfn4H5z text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-mRJ8mNsn1nfn4H5z .actor-line{stroke:grey}#mermaid-svg-mRJ8mNsn1nfn4H5z .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .sequenceNumber{fill:#fff}#mermaid-svg-mRJ8mNsn1nfn4H5z #sequencenumber{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z #crosshead path{fill:#333;stroke:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .messageText{fill:#333;stroke:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-mRJ8mNsn1nfn4H5z .labelText,#mermaid-svg-mRJ8mNsn1nfn4H5z .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-mRJ8mNsn1nfn4H5z .loopText,#mermaid-svg-mRJ8mNsn1nfn4H5z .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-mRJ8mNsn1nfn4H5z .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-mRJ8mNsn1nfn4H5z .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-mRJ8mNsn1nfn4H5z .noteText,#mermaid-svg-mRJ8mNsn1nfn4H5z .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-mRJ8mNsn1nfn4H5z .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-mRJ8mNsn1nfn4H5z .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-mRJ8mNsn1nfn4H5z .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-mRJ8mNsn1nfn4H5z .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z .section{stroke:none;opacity:0.2}#mermaid-svg-mRJ8mNsn1nfn4H5z .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-mRJ8mNsn1nfn4H5z .section2{fill:#fff400}#mermaid-svg-mRJ8mNsn1nfn4H5z .section1,#mermaid-svg-mRJ8mNsn1nfn4H5z .section3{fill:#fff;opacity:0.2}#mermaid-svg-mRJ8mNsn1nfn4H5z .sectionTitle0{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .sectionTitle1{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .sectionTitle2{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .sectionTitle3{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-mRJ8mNsn1nfn4H5z .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z .grid path{stroke-width:0}#mermaid-svg-mRJ8mNsn1nfn4H5z .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-mRJ8mNsn1nfn4H5z .task{stroke-width:2}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskText:not([font-size]){font-size:11px}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-mRJ8mNsn1nfn4H5z .task.clickable{cursor:pointer}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskText0,#mermaid-svg-mRJ8mNsn1nfn4H5z .taskText1,#mermaid-svg-mRJ8mNsn1nfn4H5z .taskText2,#mermaid-svg-mRJ8mNsn1nfn4H5z .taskText3{fill:#fff}#mermaid-svg-mRJ8mNsn1nfn4H5z .task0,#mermaid-svg-mRJ8mNsn1nfn4H5z .task1,#mermaid-svg-mRJ8mNsn1nfn4H5z .task2,#mermaid-svg-mRJ8mNsn1nfn4H5z .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskTextOutside0,#mermaid-svg-mRJ8mNsn1nfn4H5z .taskTextOutside2{fill:#000}#mermaid-svg-mRJ8mNsn1nfn4H5z .taskTextOutside1,#mermaid-svg-mRJ8mNsn1nfn4H5z .taskTextOutside3{fill:#000}#mermaid-svg-mRJ8mNsn1nfn4H5z .active0,#mermaid-svg-mRJ8mNsn1nfn4H5z .active1,#mermaid-svg-mRJ8mNsn1nfn4H5z .active2,#mermaid-svg-mRJ8mNsn1nfn4H5z .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-mRJ8mNsn1nfn4H5z .activeText0,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeText1,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeText2,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeText3{fill:#000 !important}#mermaid-svg-mRJ8mNsn1nfn4H5z .done0,#mermaid-svg-mRJ8mNsn1nfn4H5z .done1,#mermaid-svg-mRJ8mNsn1nfn4H5z .done2,#mermaid-svg-mRJ8mNsn1nfn4H5z .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-mRJ8mNsn1nfn4H5z .doneText0,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneText1,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneText2,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneText3{fill:#000 !important}#mermaid-svg-mRJ8mNsn1nfn4H5z .crit0,#mermaid-svg-mRJ8mNsn1nfn4H5z .crit1,#mermaid-svg-mRJ8mNsn1nfn4H5z .crit2,#mermaid-svg-mRJ8mNsn1nfn4H5z .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-mRJ8mNsn1nfn4H5z .activeCrit0,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeCrit1,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeCrit2,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-mRJ8mNsn1nfn4H5z .doneCrit0,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneCrit1,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneCrit2,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-mRJ8mNsn1nfn4H5z .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-mRJ8mNsn1nfn4H5z .milestoneText{font-style:italic}#mermaid-svg-mRJ8mNsn1nfn4H5z .doneCritText0,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneCritText1,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneCritText2,#mermaid-svg-mRJ8mNsn1nfn4H5z .doneCritText3{fill:#000 !important}#mermaid-svg-mRJ8mNsn1nfn4H5z .activeCritText0,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeCritText1,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeCritText2,#mermaid-svg-mRJ8mNsn1nfn4H5z .activeCritText3{fill:#000 !important}#mermaid-svg-mRJ8mNsn1nfn4H5z .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-mRJ8mNsn1nfn4H5z g.classGroup text .title{font-weight:bolder}#mermaid-svg-mRJ8mNsn1nfn4H5z g.clickable{cursor:pointer}#mermaid-svg-mRJ8mNsn1nfn4H5z g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-mRJ8mNsn1nfn4H5z g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-mRJ8mNsn1nfn4H5z .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-mRJ8mNsn1nfn4H5z .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-mRJ8mNsn1nfn4H5z .dashed-line{stroke-dasharray:3}#mermaid-svg-mRJ8mNsn1nfn4H5z #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z .commit-id,#mermaid-svg-mRJ8mNsn1nfn4H5z .commit-msg,#mermaid-svg-mRJ8mNsn1nfn4H5z .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-mRJ8mNsn1nfn4H5z g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-mRJ8mNsn1nfn4H5z g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-mRJ8mNsn1nfn4H5z g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-mRJ8mNsn1nfn4H5z .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-mRJ8mNsn1nfn4H5z .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-mRJ8mNsn1nfn4H5z .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-mRJ8mNsn1nfn4H5z .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-mRJ8mNsn1nfn4H5z .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-mRJ8mNsn1nfn4H5z .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-mRJ8mNsn1nfn4H5z .edgeLabel text{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-mRJ8mNsn1nfn4H5z .node circle.state-start{fill:black;stroke:black}#mermaid-svg-mRJ8mNsn1nfn4H5z .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-mRJ8mNsn1nfn4H5z #statediagram-barbEnd{fill:#9370db}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-state .divider{stroke:#9370db}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-mRJ8mNsn1nfn4H5z .note-edge{stroke-dasharray:5}#mermaid-svg-mRJ8mNsn1nfn4H5z .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-mRJ8mNsn1nfn4H5z .error-icon{fill:#522}#mermaid-svg-mRJ8mNsn1nfn4H5z .error-text{fill:#522;stroke:#522}#mermaid-svg-mRJ8mNsn1nfn4H5z .edge-thickness-normal{stroke-width:2px}#mermaid-svg-mRJ8mNsn1nfn4H5z .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-mRJ8mNsn1nfn4H5z .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-mRJ8mNsn1nfn4H5z .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-mRJ8mNsn1nfn4H5z .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-mRJ8mNsn1nfn4H5z .marker{fill:#333}#mermaid-svg-mRJ8mNsn1nfn4H5z .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-mRJ8mNsn1nfn4H5z {color: rgba(0, 0, 0, 0.75);font: ;}

有所动作

按照1颜色值2报文头3绘图数据

接收1颜色值2报文头3根据报文头判断接收的数据类型4接收数据

客户机

传输数据

服务器

执行绘图操作

下面是代码实现部分：
//首先是服务器界面类

package NetConnectSever2;import java.awt.Color;
import java.awt.Graphics;
import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.net.ServerSocket;
import java.net.Socket;import javax.swing.JFrame;
/*** 网络画板服务器V2.0* @author **/
public class NetDrawBoardServer1 extends JFrame{private Graphics g;/*DataOutputStream和DataInputStream*前面已经提到过，OutInputStream和InputStream一次只能读取和写入一个*字节，它的解析可以看该方法的源码解析：*Writes <code>b.length</code> bytes from the specified byte array*Reads some number of bytes from the input stream and stores them into*the buffer array <code>b</code>. *而用DataOutputStream和DataInputStream能读取不同的数据类型，像Double*(双精度型)、long（单精度型）、int（整型）....*/private DataInputStream Input;private DataOutputStream Out;private static int color=0;public NetDrawBoardServer1() {//设置属性this.setSize(500, 500);this.setDefaultCloseOperation(EXIT_ON_CLOSE);this.setTitle("网络画板服务器升级版V2.0");this.setLocationRelativeTo(null);this.setVisible(true);g=this.getGraphics();}//创建服务器public void setServer(int port) {try {//创建服务器，等待客户端接入java.net.ServerSocket sever=new ServerSocket(port);System.out.println("服务器创建成功！");//等待客户机接入java.net.Socket client=sever.accept();//client为客户端对象System.out.println("客户端连接成功！");           //获取客户端的输入输出流java.io.OutputStream out=client.getOutputStream();java.io.InputStream input=client.getInputStream();Input =new DataInputStream(input);Out =new DataOutputStream(out);while(true){System.out.println("等待客户端发送数据中.....");//首先接受color值和tag值color=Input.readInt();              int tag=Input.read();System.out.println("标识符的值为"+tag);switch (tag) {case 1:{int x1=Input.readInt();int y1=Input.readInt();int x2=Input.readInt();int y2=Input.readInt();System.out.println("命令类型：画直线-->接受的数据为：x1:"+x1+"y1:"+y1+"x2:"+x2+"y2:"+y2);g.setColor(new Color(color));g.drawLine(x1, y1, x2, y2);break;}case 2:{int x1=Input.readInt();int y1=Input.readInt();int x2=Input.readInt();int y2=Input.readInt();System.out.println("命令类型：画圆-->接受的数据为：x1:"+x1+"y1:"+y1+"x2:"+x2+"y2:"+y2);g.setColor(new Color(color));g.fillOval(x1, y1, x2-x1, y2-y1);break;}case 3:{int x1=Input.readInt();int y1=Input.readInt();int x2=Input.readInt();int y2=Input.readInt();System.out.println("命令类型：画矩形-->接受的数据为：x1:"+x1+"y1:"+y1+"x2:"+x2+"y2:"+y2);g.setColor(new Color(color));g.fillRect(x1, y1, x2-x1, y2-y1);break;}case 4:{int x3=Input.readInt();int y3=Input.readInt();System.out.println("命令类型：画随笔画-->接受的数据为：x3:"+x3+"y3:"+y3);g.setColor(new Color(color));g.fillOval(x3, y3, 10,10);break;}case 5:{g.clearRect(0, 0, this.getWidth(), this.getHeight());System.out.println("命令类型：清空界面");break;}default:break;}}}catch(Exception e) {e.printStackTrace();}}public static void main(String[] args) {NetDrawBoardServer1 sever=new NetDrawBoardServer1();sever.setServer(9999);}
}

然后是客户端类，客户端一共有三个类，一个界面类、一个监听器类、还有一个连接服务器类

package NetConnectClient2;import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.GridLayout;
import java.awt.event.ActionListener;import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;import NetConnectClient1.MouLis;
/*** * * @intruduction 网络画板客户端界面窗口客户端界面* 可以实现画直线、画圆圈、画矩形、随笔画、以及颜色的改变*实现方法-->大致流程 创建服务器-->客户端连接服务器(客户端界面有许多的按钮，按钮有许多的功能)*-->在每次客户端向服务器传值的情况时，首先传入一个（数据类型标识符），服务器输入流读取数据的时候首先读到的时一个Tag，根据这个*Tag来判断传入的数据是什么，然后进行相应的操作-->然后再服务器界面窗口显现出来***协议：*客户端发送数据的方法：客户端第一个发送的是颜色变量-->第二个是数据包的Tag-->然后不同的Tag发送不同的数据包*     Tag是Byte型 1-->对应画直线（四个坐标值）*                           2-->对应画圆圈（四个坐标值）*                           3-->对应画矩形（四个坐标值）*                           4-->对应画随笔画（四个坐标值，实时传输）*                           5-->对应清空画板*服务器接受数据的方法：服务器每次读取第一个数据是客户端发送过来的RGB值-->第二个是读取Tag（数据包标识符）-->根据不同的Tag进入不同的数据*读取方法。**/
public class ClientFrame1 extends JFrame {//创建画布对象private Graphics g;//客户端对象private NetConnectClient2.netClient1 net;public ClientFrame1() {net=new netClient1();}public void showUI() {this.setSize(new Dimension(500, 500));this.setTitle("网络画板客户端升级版V2.0");this.setDefaultCloseOperation(EXIT_ON_CLOSE);this.setLocationRelativeTo(null);//设置客户端窗体布局，以BorderLayout的形式去布局//两个JPanelBorderLayout border=new BorderLayout();this.setLayout(border);//北面JPanel 选项窗口；JPanel panel1=new JPanel();panel1.setSize(0, 30);String[] btnname= {"改变颜色","画直线","画圆","画矩形","随笔画","清空画板"};GridLayout grid=new GridLayout(1, 6);panel1.setLayout(grid);this.add(panel1,BorderLayout.NORTH);JPanel panel2=new JPanel();this.add(panel2,BorderLayout.CENTER);     this.setVisible(true);g=panel2.getGraphics();MouLis1 lis=new MouLis1(net, g,this);//添加按钮for(int i=0;i<btnname.length;i++) {JButton btn=new JButton(btnname[i]);panel1.add(btn);//键盘添加动作监听器btn.addActionListener((ActionListener) lis);}//获取画布对象while(!net.connectSever()) {System.out.println("连接服务器........");}     //添加鼠标监听器panel2.addMouseListener(lis);panel2.addMouseMotionListener(lis);}public static void main(String[] args) {ClientFrame1 client=new ClientFrame1();client.showUI();}
}

然后是监听器类：

package NetConnectClient2;import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;import javax.swing.JColorChooser;public class MouLis1 extends MouseAdapter implements ActionListener {private static Byte tag=1;private static int Clientcolor =Color.black.getRGB();private netClient1 client;private Graphics g;private ClientFrame1 cli; private int x1,y1,x2,y2,x3,y3;public MouLis1(netClient1 client,Graphics g,ClientFrame1 cli) {this.client=client;this.g=g;this.cli=cli;}//鼠标点击，获取起点坐标public void mousePressed(MouseEvent e) {   x1=e.getX();y1=e.getY();}//鼠标松开，获取终点坐标，通过client把坐标值传给服务器Severpublic void mouseReleased(MouseEvent e) {x2=e.getX();y2=e.getY();if(tag==1) {          g.drawLine(x1, y1, x2, y2);         client.sendLineData(x1, y1, x2, y2,Clientcolor);}else if(tag==2) {g.fillOval(x1, y1, x2-x1, y2-y1);client.sendCricleData(x1, y1, x2, y2, Clientcolor);//并且向服务器发送画圆的数据}else if(tag==3) {//向服务器发送画矩形的坐标数据g.fillRect(x1, y1, x2-x1, y2-y1);client.sendRectData(x1, y1, x2, y2, Clientcolor);}  }//鼠标拖动public void mouseDragged(MouseEvent e){if(tag==4) {x3=e.getX();y3=e.getY();g.fillOval(x3, y3, 10, 10);client.sendRandomPaintData(x3, y3, Clientcolor);   }}@Overridepublic void actionPerformed(ActionEvent e) {String text=e.getActionCommand();System.out.println("命令类型改变"+text);if("画直线".equals(text)) {tag=1;}else if("画圆".equals(text)){tag=2;}else if("画矩形".equals(text)){tag=3;}else if("随笔画".equals(text)){tag=4;}else if("清空画板".equals(text)) {byte b=tag;tag=5;g.clearRect(0, 30, cli.getWidth(), cli.getHeight());client.sendClearface(Clientcolor);tag=b;}else if("改变颜色".equals(text)){JColorChooser jf=new JColorChooser();Clientcolor=jf.showDialog(null, "选择颜色", Color.black).getRGB();g.setColor(new Color(Clientcolor));}}
}

然后是连接类：

package NetConnectClient2;import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.net.Socket;public class netClient1 {private DataInputStream Input;private DataOutputStream Out;public boolean connectSever() {try {java.net.Socket client =new Socket("127.0.0.1", 9999);System.out.println("连接服务器成功！");//获取服务器的输入输出流java.io.InputStream input =client.getInputStream();java.io.OutputStream out=client.getOutputStream();//创建DataInputStream和DataOutputStreamInput=new DataInputStream(input);Out=new DataOutputStream(out);return true;}catch(Exception e){System.out.println("客户端连接服务器失败！");e.printStackTrace();            }return false;}//传入直线数据的方法public void sendLineData(int x1,int y1,int x2,int y2,int color ) {try {Out.writeInt(color);Out.write(1);Out.writeInt(x1);Out.writeInt(y1);Out.writeInt(x2);Out.writeInt(y2);System.out.println("数据发送成功！");System.out.println("命令类型：画直线-->发送的数据为x1:"+x1+"y1:"+y1+"x2:"+x2+"y2:"+y2);}catch(Exception er) {er.printStackTrace();}     }public void sendCricleData(int x1,int y1,int x2,int y2,int color) {try {Out.writeInt(color);Out.write(2);Out.writeInt(x1);Out.writeInt(y1);Out.writeInt(x2);Out.writeInt(y2);System.out.println("数据发送成功！");System.out.println("命令类型：画圆-->发送的数据为x1:"+x1+"y1:"+y1+"x2:"+x2+"y2:"+y2);}catch(Exception er) {er.printStackTrace();}  }public void sendRectData(int x1,int y1,int x2,int y2,int color) {try {Out.writeInt(color);Out.write(3);Out.writeInt(x1);Out.writeInt(y1);Out.writeInt(x2);Out.writeInt(y2);System.out.println("数据发送成功！");System.out.println("命令类型：画矩形-->发送的数据为x1:"+x1+"y1:"+y1+"x2:"+x2+"y2:"+y2);}catch(Exception er) {er.printStackTrace();}   }//清空界面的方法public void sendClearface(int color) {try {Out.writeInt(color);Out.write(5);System.out.println("数据发送成功！");System.out.println("命令类型：清空界面");}catch(Exception er) {er.printStackTrace();}  }//绘制随笔画的方法public void sendRandomPaintData(int x3,int y3,int color) {try {Out.writeInt(color);Out.write(4);Out.writeInt(x3);Out.writeInt(y3);System.out.println("数据发送成功！");System.out.println("命令类型：画随笔画-->发送的数据为x3:"+x3+"y3:"+y3);}catch(Exception er) {er.printStackTrace();}}}

一个具有一些功能的网络画图板相关推荐

qt制作一个画板_基于Qt的画图板的设计与实现(含录像)
基于Qt的画图板的设计与实现(含录像)(任务书,开题报告,外文翻译,毕业论文20000字,程序代码,答辩PPT,答辩视频录像) 摘要本文的主要内容是记述画图板的设计与实现课程设计中的一些关键技术和辅 ...
网络通信上手项目（网络画图板）
写在前面网络通信是计算机同学必须要了解的一项内容,因为我们的数据都是通过网络进行传递和获取的,那么今天的这篇博客呢,算是一个计算机网络的入门,边实践,边认识我们的数据是怎么通过网络一步步传送到其他人 ...
一个功能强大的画图板（二）
我们在上一篇博客画图板一:[画图板一](http://blog.csdn.net/songhengqian/article/details/51792420)中基本实现了绘画的功能,那么我们就要丰富我 ...
一个功能强大的画图板（三）
大家看过我上两篇博客[画图板一](http://blog.csdn.net/songhengqian/article/details/51792420),[画图板二](http://blog.csdn ...
Java编写的画图板，功能非常齐全，完整代码附详细设计报告
今天为大家分享一个java语言编写的图书管理程序-003,目前系统功能已经很全面,后续会进一步完善.整个系统界面漂亮,有完整得源码,希望大家可以喜欢.喜欢的帮忙点赞和关注.一起编程.一起进步开发环境 ...
画图板的实现— —让你成为抽象派画家
简单画图板的实现前言先来欣赏一张图片这张图片是不是非常神奇,你是不是感受到了代码的强大!下面还有更多图片哦! 接下让我们来实现一个简单的画图板吧内容框架 1.创建一个画图的JFrame界面 2 ...
Java 从零开始实现一个画图板、以及图像处理功能，代码可复现
Java 从零开始实现一个画图板.以及图像处理功能,代码可复现这是一个学习分享博客,带你从零开始实现一个画图板.图像处理的小项目,为了降低阅读难度,本博客将画图板的一步步迭代优化过程展示给读者,篇幅 ...
java绘图板_Java中的画图板简单功能实现
首先画图板就是用到了我们之前所学的知识,并不是很难,如果要构建一些复杂的功能,还需进一步学习.画图板所需要的API: JFrame //窗体 : JPanel //面板 :JButton //按钮 A ...
一个Java画图板程序的设计
本文讲述一个画图板应用程序的设计,屏幕抓图如下.这篇文章带有三个附件,其中两个jar文件都是j2sdk1.4.2_08编译打包,包含源代码,可执行,如下表: 附件名称及链接详情 jDraw_basi ...

一个具有一些功能的网络画图板

一个具有一些功能的网络画图板相关推荐

最新文章

热门文章