[奇技淫巧]CEF3使用H5实现标题栏拖动窗口

最新推荐文章于 2024-05-16 21:09:48 发布

无情的大力哥

最新推荐文章于 2024-05-16 21:09:48 发布

阅读量1.2k

点赞数 1

分类专栏： CEF3导读文章标签： CEF3 Windows

本文链接：https://blog.csdn.net/jeak_yang/article/details/103145737

版权

CEF3导读专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为什么要用H5实现标题栏

交互上拓展了用户的操作区域
减少了H5和Native的交互,使H5功能更独立,耦合性更低

举例

小米画报网易云
注: 蓝色区域为H5,红色区域为Native

实现原理

通过H5移动Native窗口的本质是子窗口移动父窗口
要点将H5的鼠标消息传递给Native

代码实现

H5页面通过回调获取到鼠标移动的消息,通过Windows下我们注册的js对象(windows.jvs.drag )传递给Native

	<html>
    <head>
    </head>
    <body
		onmousedown="mousedown(event)"
		onmousemove="mousemove(event)"
		onmouseup="mouseup(event)"
		onmouseout="mouseout(event)"
	>
        <div id="src"> </div>
        <script>
			var mouse_is_down = false;

			function mousedown(e)
			{
				console.log('mousedown')
				mouse_is_down = true;
			}
			function mouseup(e)
			{
				console.log('mouseup')
				mouse_is_down = false;
			}
			
			function mouseout(e)
			{
				console.log('mouseout')
				mouse_is_down = false;
			}
			
			function mousemove(e)
			{
				//console.log('mousemove')
				if (mouse_is_down)
				{
					window.jvs.drag(e.movementX,e.movementY)
					console.log(e)
				}
			}
			
        </script>
    </body>
</html>

Native 实现

void NativeWnd::OnProcessMessageReceived(std::string message_name, CefRefPtr<CefListValue> args)
{
    if (message_name == "drag")
    {
        int offsetX = args->GetInt(0);
        int offsetY = args->GetInt(1);
        LOG(INFO) << "drag: " << offsetX << " - " << offsetY;

        RECT rc;
        GetWindowRect(m_hWnd, &rc);
        int left = rc.left + offsetX;
        int top = rc.top + offsetY;

        ::MoveWindow(m_hWnd, left, top, rc.right - rc.left, rc.bottom - rc.top, false);
    }
}

欢迎访问本人的小站 xsnip.cn

无情的大力哥

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
[奇技淫巧]CEF3使用H5实现标题栏拖动窗口

为什么要用H5实现标题栏交互上拓展了用户的操作区域减少了H5和Native的交互,使H5功能更独立,耦合性更低举例注: 蓝色区域为H5,红色区域为Native实现原理通过H5移动Native窗口的本质是子窗口移动父窗口要点将H5的鼠标消息传递给Native代码实现H5页面通过回调获取到鼠标移动的消息,通过Windows下我们注册的js对象(windows.jvs...
复制链接

扫一扫

专栏目录