画图板用c++实现和用js实现的websocket版本

最新推荐文章于 2024-06-04 13:52:27 发布

原创最新推荐文章于 2024-06-04 13:52:27 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c #js #ViewUI

c 同时被 2 个专栏收录

46 篇文章

订阅专栏

opencv

4 篇文章

订阅专栏

本文介绍了一个基于OpenCV的C++程序，该程序利用鼠标输入实现在图像上绘制线条的功能。此外，还展示了如何通过Tomcat7的WebSocket进行客户端与服务器之间的实时交互，使用户可以在网页端看到绘图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

画图板
opencv的c++


#include <opencv2/opencv.hpp>  
using namespace std;
#pragma comment(linker, "/subsystem:\"windows\" /entry:\"mainCRTStartup\"")  
const char *pstrWindowsMouseDrawTitle = "鼠标绘图(http://blog.youkuaiyun.com/MoreWindows)";
// 鼠标消息的回调函数  
void on_mouse(int event, int x, int y, int flags, void* param)
{
	static bool s_bMouseLButtonDown = false;
	static CvPoint s_cvPrePoint = cvPoint(0, 0);

	switch (event)
	{
	case CV_EVENT_LBUTTONDOWN:
		s_bMouseLButtonDown = true;
		s_cvPrePoint = cvPoint(x, y);
		break;

	case  CV_EVENT_LBUTTONUP:
		s_bMouseLButtonDown = false;
		break;

	case CV_EVENT_MOUSEMOVE:
		if (s_bMouseLButtonDown)
		{
			CvPoint cvCurrPoint = cvPoint(x, y);
			cvLine((IplImage*)param, s_cvPrePoint, cvCurrPoint, CV_RGB(0, 0, 20), 3);
			s_cvPrePoint = cvCurrPoint;
			cvShowImage(pstrWindowsMouseDrawTitle, (IplImage*)param);
		}
		break;
	}
}
int main()
{
	const int MAX_WIDTH = 500, MAX_HEIGHT = 400;
	const char *pstrSaveImageName = "MouseDraw.jpg";

	IplImage *pSrcImage = cvCreateImage(cvSize(MAX_WIDTH, MAX_HEIGHT), IPL_DEPTH_8U, 3);
	cvSet(pSrcImage, CV_RGB(255, 255, 255)); //可以用cvSet()将图像填充成白色  
	cvNamedWindow(pstrWindowsMouseDrawTitle, CV_WINDOW_AUTOSIZE);
	cvShowImage(pstrWindowsMouseDrawTitle, pSrcImage);

	cvSetMouseCallback(pstrWindowsMouseDrawTitle, on_mouse, (void*)pSrcImage);

	int c;
	do{
		c = cvWaitKey(0);
		switch ((char)c)
		{
		case 'r':
			cvSet(pSrcImage, CV_RGB(000, 000, 255));
			cvShowImage(pstrWindowsMouseDrawTitle, pSrcImage);
			break;

		case 's':
			cvSaveImage(pstrSaveImageName, pSrcImage);
			break;
		}
	} while (c > 0 && c != 27);

	cvDestroyWindow(pstrWindowsMouseDrawTitle);
	cvReleaseImage(&pSrcImage);
	return 0;
}

参考
http://blog.youkuaiyun.com/morewindows/article/details/8426283

html版本，+tomcat7的websocket


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jiben</title>
</head>
<script type="text/javascript"> 
//--------------line----begin-------
	var w=1; 
	var h=1; 
	var col="blue"; 
	function catchMouse(){ 
	    var x=event.clientX-50; 
	    var y=event.clientY-52; 
	    makedot(x,y); 
	    if (ws != null) {
	    	ws.send(x+","+y);
		}
	} 
	function makedot(x,y){ 
	    var sp=document.getElementById("sspp"); 
	    sp.insertAdjacentHTML("BeforeEnd","<hr style='position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px;color:"+col+";'>"); 
	} 
	function myMouseDown(){
		document.onmousemove=catchMouse
	}
	function myMouseUp(){
		document.onmousemove=null;
	}
//--------------line----end---------
</script>
<script type="text/javascript">
	var ws = null;
	function log(text) {
		document.getElementById("log").innerHTML = text + "<br>"+ document.getElementById("log").innerHTML;
	}
	function startServer() {
		var url = document.getElementById("serverip").value;
		if ('WebSocket' in window) {
			ws = new WebSocket(url);
		} else if ('MozWebSocket' in window) {
			ws = new MozWebSocket(url);
		} else {
			log('浏览器不支持');
			return;
		}
		ws.onopen = function() {
			//log('Opened!');
		};
		ws.onmessage = function(event) {
			//log(event.data);
			var x_value =event.data.split(",")[0];
			var y_value = event.data.split(",")[1];
			makedot(x_value,y_value); 
		};
		ws.onclose = function() {
			//log('Closed!');
		}
	}
	function sendMessage() {
		var textMessage = document.getElementById("textMessage").value;
		if (ws != null && textMessage != "") {
			ws.send(textMessage);
		}
	}
	function stopconn() {
		ws.close();
	}
</script>


<body onload="startServer()">

<input id="serverip" type="text" size="20" style="display:none"
		value="ws://182.254.155.000:8080/webs/websocket/line" />
<div id="log" style="display:none"></div>
<span id="sspp" onMouseDown="myMouseDown()" onMouseUp="myMouseUp()" style="position:absolute;top:50px;left:50px;width:1000px;height:1000px;background-color:#eeeeee "> 
</span>
</body>
</html>

LineWebSocketServlet.java


package com.hao;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

public class LineWebSocketServlet extends WebSocketServlet {
	private static Map<String,MyMessageInbound> mmiList  = new HashMap<String,MyMessageInbound>();

	protected StreamInbound createWebSocketInbound(String subProtocol,
			HttpServletRequest arg1) {
		return new MyMessageInbound();
	}

	private class MyMessageInbound extends MessageInbound {
		WsOutbound myoutbound;
		String mykey;
		@Override
		public void onOpen(WsOutbound outbound) {
			try {
				System.out.println("Open Client.");
				this.myoutbound = outbound;
				mykey ="open "+System.currentTimeMillis();;
				mmiList.put(mykey, this);
				System.out.println("mmiList size:"+mmiList.size());
				outbound.writeTextMessage(CharBuffer.wrap(mykey));
			} catch (IOException e) {
				e.printStackTrace();
			}
		}

		@Override
		public void onClose(int status) {
			System.out.println("Close Client.");
			mmiList.remove(mykey);
		}

		@Override
		protected void onBinaryMessage(ByteBuffer arg0) throws IOException {

		}

		@Override
		protected void onTextMessage(CharBuffer message) throws IOException {
			System.out.println("LineWebSocketServlet.onTextMessage--->" + message.toString());
			for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) {
				  MyMessageInbound mmib = (MyMessageInbound) entry.getValue();
	              CharBuffer buffer = CharBuffer.wrap(message);
	              mmib.myoutbound.writeTextMessage(buffer);
	              mmib.myoutbound.flush();
			}

		}
	}
}

web.xml


  <servlet>
      <servlet-name>wsLine</servlet-name>
      <servlet-class>com.hao.LineWebSocketServlet</servlet-class>
    </servlet>
    <servlet-mapping>
      <servlet-name>wsLine</servlet-name>
      <url-pattern>/websocket/line</url-pattern>
    </servlet-mapping>