使用soui4实现一个标尺控件

#pragma once
class CRulerBar : public SWindow
{
	DEF_SOBJECT(SWindow, L"rulerbar")
public:
	CRulerBar();
	~CRulerBar();

protected:
	void OnPaint(IRenderTarget* pRT);

protected:
	SOUI_MSG_MAP_BEGIN()
		MSG_WM_PAINT_EX(OnPaint)
		SOUI_MSG_MAP_END()

		SOUI_ATTRS_BEGIN()
		ATTR_INT(L"bar_position", m_nBarPos, FALSE) //标尺位置
		ATTR_INT(L"bar_pix2cm", m_nPix2CM, FALSE)	//厘米像素比例
		SOUI_ATTRS_END()
private:
	int     m_nBarPos;
	int		m_nPix2CM;
};

#include "stdafx.h"
#include "CRulerBar.h"

CRulerBar::CRulerBar()
{
	m_nBarPos = 0;
	m_nPix2CM = 20;
}

CRulerBar::~CRulerBar()
{
}
void CRulerBar::OnPaint(IRenderTarget* pRT)
{
	pRT->SetAntiAlias(FALSE);

	CAutoRefPtr<IPen> pen, oldpen;
	pRT->CreatePen(PS_SOLID, RGBA(0, 0, 0, 255), 1, &pen);
	pRT->SelectObject(pen, (IRenderObj**)&oldpen);

	COLORREF crRulerText(RGBA(0, 0, 0, 100));
	CRect rcRuler = GetWindowRect();
	switch (m_nBarPos)
	{
	case 0:
	{
		{//边线(下边)
			double dXStart = rcRuler.left;
			double dYStart = rcRuler.bottom - 1;
			double dXEnd = rcRuler.right;
			double dYEnd = rcRuler.bottom - 1;

			CPoint pts[2];
			pts[0].x = dXStart;
			pts[0].y = dYStart;

			pts[1].x = dXEnd;
			pts[1].y = dYEnd;
			pRT->DrawLines(pts, 2);
		}

		{//刻度线
			for (int i = 0; i < 100; i++)
			{
				double dXStart = rcRuler.left + i * m_nPix2CM;
				double dYStart = rcRuler.top + 5;
				double dXEnd = dXStart;
				double dYEnd = rcRuler.bottom;
				{//长刻度线
					CPoint pts[2];
					pts[0].x = dXStart;
					pts[0].y = dYStart;

					pts[1].x = dXEnd;
					pts[1].y = dYEnd;
					pRT->DrawLines(pts, 2);
				}

				//文本绘制区域
				SOUI::CRect rcText;
				rcText.left = dXStart;
				rcText.top = dYStart;
				rcText.right = dXStart + m_nPix2CM;
				rcText.bottom = dYEnd;

				{//短刻度线
					for (int j = 1; j < 5; j++)
					{
						double startX = rcText.left + j * (rcText.Width() / 5);
						double startY = rcText.top + (rcText.Height() / 2);
						double endX = startX;
						double endY = rcText.bottom;

						CPoint pts[2];
						pts[0].x = startX;
						pts[0].y = startY;

						pts[1].x = endX;
						pts[1].y = endY;
						pRT->DrawLines(pts, 2);
					}
				}

				SStringT sstrContent;
				sstrContent.Format(_T("%d"), i);
				pRT->SetTextColor(crRulerText);
				pRT->DrawText(sstrContent, sstrContent.GetLength(), rcText, DT_SINGLELINE | DT_LEFT | DT_TOP);
			}
		}
	}
	break;
	case 1:
	{
		//right ruler
		//TODO:
	}
	break;
	case 2:
	{
		//bottom ruler
		//TODO:
	}
	break;
	case 3:
	{
		{//边线(右边)
			CPoint pts[2];
			pts[0].x = rcRuler.right - 1;
			pts[0].y = rcRuler.top;

			pts[1].x = rcRuler.right - 1;
			pts[1].y = rcRuler.bottom;
			pRT->DrawLines(pts, 2);
		}

		{//刻度线
			for (int i = 0; i < 100; i++)
			{
				double dXStart = rcRuler.left + 5;
				double dYStart = rcRuler.top + i * m_nPix2CM;
				double dXEnd = rcRuler.right;
				double dYEnd = dYStart;
				{//长刻度线
					CPoint pts[2];
					pts[0].x = dXStart;
					pts[0].y = dYStart;

					pts[1].x = dXEnd;
					pts[1].y = dYEnd;
					pRT->DrawLines(pts, 2);
				}

				//文本绘制区域
				SOUI::CRect rcText;
				rcText.left = dXStart;
				rcText.top = dYStart;
				rcText.right = dXEnd;
				rcText.bottom = dYStart + m_nPix2CM;

				{//短刻度线
					for (int j = 1; j < 5; j++)
					{
						double startX = rcText.left + (rcText.Width() / 2);
						double startY = rcText.top + j * (rcText.Height() / 5);

						double endX = rcText.right;
						double endY = startY;

						CPoint pts[2];
						pts[0].x = startX;
						pts[0].y = startY;

						pts[1].x = endX;
						pts[1].y = endY;
						pRT->DrawLines(pts, 2);
					}
				}

				SStringT sstrContent;
				sstrContent.Format(_T("%d"), i);
				pRT->SetTextColor(crRulerText);
				pRT->DrawText(sstrContent, sstrContent.GetLength(), rcText, DT_SINGLELINE | DT_LEFT | DT_TOP);
			}
		}
		pRT->SelectObject(oldpen, NULL);
	}
	break;
	default:
		break;
	}

	pRT->SelectObject(oldpen, NULL);
}

控件使用：
Step1：注册

m_theApp->RegisterWindowClass<CRulerBar>();

Step2：布局中使用

			  <caption pos="[0,{0,-0,-0" colorBkgnd="#FFFFFF" font="face:微软雅黑,size:10">
				  <caption pos="0,0,@40,@40">
					  <text  pos="|0,|0" offset="-0.5,-0.5" >cm</text>
				  </caption>
				  <!--顶部游标-->
				  <caption pos="40,0,-0,@40" colorBkgnd="#FFFFFF">
					  <scrollview name="scrollview_topruler" pos="0,0,-0,-0" viewSize="-1,-1" sbwid="0" scrollSpeed="40" >
						  <rulerbar name="ruler_top" pos="0,0,@2000,@40" bar_position="0"></rulerbar>
					  </scrollview>
				  </caption>
				  <!--左侧游标-->
				  <caption pos="0,40,@40,-0" colorBkgnd="#FFFFFF">
					  <scrollview name="scrollview_leftruler" pos="0,0,-0,-0" viewSize="-1,-1" sbwid="0" scrollSpeed="40" >
						  <rulerbar name="ruler_left" pos="0,0,@40,@2000" bar_position="3"></rulerbar>
					  </scrollview>
				  </caption>
			  </caption>

效果图：