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

为什么要用H5实现标题栏

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

举例

[奇技淫巧]CEF3使用H5实现标题栏拖动窗口_第1张图片 [奇技淫巧]CEF3使用H5实现标题栏拖动窗口_第2张图片
注: 蓝色区域为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

你可能感兴趣的:(CEF3导读,CEF3,Windows)