C#读一张图做窗口背景，怎么做(采纳给高分)

Posted 2023-04-13

改变背景颜色

改变对话框（窗口）的背景颜色是最简单的改变Windows应用程序外观的方法，根据Windows创建与管理机理，一般有两种方法。一种是处理WM_CTLCOLOR消息，首先创建所选背景颜色的刷子，然后调用SetBkColor()或SetDialogBkColor()以所创建的刷子来绘制窗口或对话框的背景。需要重画窗口或对话（或对话的子控件）时，Windows向对话发送消息WM_CTLCOLOR，应用程序处理WM_CTLCOLOR消息并返回一个用来绘画对话背景的刷子句柄。另外一种是响应Windows的WM_ERASEBKGND消息，Windows向窗口发送一个WM_ERASEBKGND消息通知该窗口擦除背景，可以使用VC++的ClassWizard重载该消息的缺省处理程序来擦除背景（实际是用刷子画），并返回TRUE以防止Windows擦除窗口。

2．改变窗口外形

通过使用新的SDK函数SetWindowRgn()，可以将绘画和鼠标消息限定在窗口的一个指定的区域，因此实际上是使窗口成为指定的不规则形状（区域形状）。“区域”是Windows GDI中一种强有力的机制，区域是设备上的一块空间，可以是任意形状，复杂的区域可以由各个小区域组合而成。Windows内含的区域创建函数有CreateRectRgn()、CreatePolyRgn()、CreatePolygonRgn()、CreateRoundRectRgn()和CreateEllipticRgn()，再通过CombineRgn()来组合区域，即可得到复杂形状的区域，获得复杂形状的窗口外形。

通过上面的方法虽然可以得到“异形”窗口，但感觉颜色单调，外形也不够“COOL”，能否获得更酷的“异形”对话框/窗口呢？回答是肯定的。下面就介绍利用位图和蒙板创建“异形”对话框/窗口的方法。

3．利用位图创建异形对话框窗口

利用位图创建异形对话框原理是根据象素的颜色来进行“扣像”处理，对所有非指定颜色象素区域进行区域组合。利用这一技术，实际上就是实现对话框/窗口的位图背景，并且对指定的颜色区域进行透明处理。下面就以透明位图为背景的对话框为例来说明：

首先用绘图软件如PhotoShop绘制编辑一幅拟做对话框背景用的图片，用BMP格式保存，假设存为Back.Bmp。需要说明的是，虽然Visual C++集成开发环境的资源编辑器只能编辑不超过16色的位图，但完全我们可以以真彩色方式存储，不必理会Visual C++的警告。

下一步是用Visual C++的AppWizard创建一个基于对话框的应用程序假定命名为Trans。用资源编辑器引入背景图片Back.Bmp，如果是高彩色，不必理会出现的警告信息，点击OK确认即可。为了明确，修改默认的资源ID标识IDB_BITMAP1为IDB_BACKBMP。然后修改对话框的Style为Popup，Border为None，如图1。

图1

向CTransDlg类添加区域处理功能模块void CTransDlg::SetupRegion(CDC *pDC /*对话框窗口DC*/, UINT BackBitmapID /*背景位图资源ID*/, UINT MaskBitmapID /*区域处理位图资源ID*/, COLORREF TransColor = 0x00000000 /*透明颜色值，默认为黑色*/)。到目前为止，我们暂时认为MaskBitmapID等同于BackBitmapID。其核心工作是根据MaskBitmapID指示位图的象素颜色进行区域组合。完整的代码如下：

void CTransDlg::SetupRegion(CDC *pDC /*对话框窗口DC*/,

UINT BackBitmapID /*背景位图资源ID*/,

UINT MaskBitmapID /*区域处理位图资源ID*/,

COLORREF TransColor /*透明颜色值*/)



CDC memDC;

CBitmap cBitmap;

CBitmap* pOldMemBmp = NULL;

COLORREF cl;

CRect cRect;

UINT x, y;

CRgn wndRgn, rgnTemp;

//取得窗口大小

GetWindowRect(&cRect);

//背景位图资源ID

m_BackBitmapID = BackBitmapID

//装载位图

cBitmap.LoadBitmap(MaskBitmapID);

memDC.CreateCompatibleDC(pDC);

pOldMemBmp = memDC.SelectObject(&cBitmap);

//首先创建默认的完整区域为完整的窗口区域

wndRgn.CreateRectRgn(0, 0, cRect.Width(), cRect.Height());

//下面的两层循环为检查背景位图象素颜色，进行透明区域处理；

//当象素颜色为指定的透明值时，即将该点从区域中剪裁掉。

//其中用到的几个成员变量m_MaskLeftOff、m_MaskTopOff、

//m_MaskRightOff、m_MaskBottomOff、m_FrameWidth

//和m_CaptionHeight，其作用后面再作说明，此时可全部当作0来处理。

for(x= m_FrameWidth+m_MaskLeftOff;

x <=cRect.Width() - m_FrameWidth-m_MaskRightOff; x++)

for(y = m_CaptionHeight+m_MaskTopOff;
y <=cRect.Height() - m_FrameWidth-m_MaskBottomOff; y++)

//取得坐标处象素的颜色值

cl = memDC.GetPixel(x - m_FrameWidth-m_MaskLeftOff,

y - m_CaptionHeight-m_MaskTopOff);

if(col == TransColor)



//象素颜色为指定的透明色，创建透明“微区域”

rgnTemp.CreateRectRgn(x, y, x+1, y+1);

//“扣像”，从完整的区域中“扣除”透明的“微区域”

wndRgn.CombineRgn(&wndRgn, &rgnTemp, RGN_XOR);

//删除刚创建的透明“微区域”，释放系统资源

rgnTemp.DeleteObject();







if (pOldMemBmp) memDC.SelectObject(pOldMemBmp);

//用设定窗口为指定的区域

SetWindowRgn((HRGN)wndRgn, TRUE);



重置系统默认的背景擦除操作，即添加WM_ERASEBKGND消息处理过程，这一步可以借助ClassWizard来简化操作。

BOOL CTransDlg::OnEraseBkgnd(CDC* pDC)



// TODO: Add your message handler code here and/or call default

CRect rect;

CDC memDC;

CBitmap cBitmap;

CBitmap* pOldMemBmp = NULL;

GetWindowRect(&rect);

//装载背景位图

cBitmap.LoadBitmap(m_BackBitmapID);

memDC.CreateCompatibleDC(pDC);

pOldMemBmp = memDC.SelectObject(&cBitmap);

//将背景位图复制到窗口客户区

pDC-> BitBlt(0, 0, rect.Width(), rect.Height(),

&memDC, 0, 0, SRCCOPY);

if (pOldMemBmp) memDC.SelectObject( pOldMemBmp );

//删除系统却省的OnEraseBkgnd功能

//return CDialog::OnEraseBkgnd(pDC);

return TRUE;



接下来是在WM_PAINT的消息处理函数OnPaint()中添加代码。由于当背景位图比较大时，进行区域处理比较耗时，所以只在启动时进行一次处理。一种方法是OnInitDialog()处理，但这样会在从启动程序到窗口出现有相当的延迟，易引起程序尚未启动的误解。再一种方法就是在OnPaint()处理，但为了避免重复处理，可以加上一个判断标志。以下是OnPaint()的代码，正体为AppWizard生成，粗体为自己添加内容。

void CTransDlg::OnPaint()



if (IsIconic())



……



else



if(m_nFirstRun) //首次运行标志

//修改鼠标光标为等待方式

BeginWaitCursor();

//设置背景区域

SetupRegion(GetWindowDC(),
IDB_BACKBMP,
IDB_BACKBMP,
0x00FFFFFF /*白色*/);

//恢复鼠标光标为正常模式

EndWaitCursor();

m_nFirstRun = 0;



CDialog::OnPaint();





剩下的工作就是根据背景位图的大小来设置对话框窗口的大小和位置，这可以在OnInitDialog()中通过调用MoveWindow（）来实现。再添加一些变量的声名和初始化，即可编译运行。图2为运行结果示例：

图2

4．进一步的讨论

前面实现了单一模式的异形对话框，但有些情况下又需要不同的样式，如有标题栏、边框等，或者只作局部的处理，这就是前面两个成员变量m_FrameWidth和m_CaptionHeight作用，通过在OnInitDialog()判断窗口样式，使m_FrameWidth和m_CaptionHeight取不同的值。这部分的代码为：

BOOL CTransBmpDlg::OnInitDialog()



……

// TODO: Add extra initialization here

m_nFirstRun = 1;

//数据设置，窗口左上角坐标：m_Left=0，m_Top=0
//背景位图宽高：m_Width=535，m_Height=105

SetSize(0, 0, 535, 105);

//蒙板处理区域与窗口边框的距离

m_MaskLeftOff=m_MaskTopOff=m_MaskRightOff=m_MaskBottomOff=0;

//窗口边框与标题栏象素值

m_FrameWidth = m_CaptionHeight = 0;

//取得窗口样式

LONG style = ::GetWindowLong(this-> m_hWnd, GWL_STYLE);

//如保留窗口风格样式，则根据不同的窗口边框类型
//选取不同的m_FrameWidth和m_CaptionHeight值，
//也可以根据处理位置的需要进行付值

if((style & WS_BORDER) == WS_BORDER)

m_FrameWidth = ::GetSystemMetrics(SM_CXBORDER);

if((style & WS_THICKFRAME) == WS_THICKFRAME)

m_FrameWidth = ::GetSystemMetrics(SM_CXFIXEDFRAME);

if((style & DS_MODALFRAME) == DS_MODALFRAME)

m_FrameWidth = ::GetSystemMetrics(SM_CXFIXEDFRAME);

if((style & WS_CAPTION) == WS_CAPTION)

m_FrameWidth = ::GetSystemMetrics(SM_CXFIXEDFRAME);

m_CaptionHeight = ::GetSystemMetrics(SM_CYSMCAPTION);



m_CaptionHeight += m_FrameWidth * 2;

//重置窗口的位置和大小

MoveWindow(m_Left, m_Top,
m_Width + m_FrameWidth * 2,
m_Height + m_CaptionHeight, TRUE);

……

return TRUE; // return TRUE unless you set the focus to a control



另外，为进一步增加灵活性，使窗口样式不仅仅受背景位图颜色的控制。通过指定SetupRegion()的MaskBitmapID 为一个我们称之为“蒙板”的双色位图（多色彩也可以，但一般没有必要），即可实现需要的操作。图4为在同一背景位图上，通过图3的蒙板位图实现的效果，并且增加了对话框窗体的边框和标题栏属性。

图3

图4

利用这种蒙板技术，可以创建出任意形状的窗口，而与背景位图无关。需要注意的是，对于对话框中的控件如按钮等，如处在或部分处在通明区域中，则通明区域中部分一并被剪裁掉，是否剪裁和剪裁位置与大小，利用蒙板可以很方便地进行控制。

需要特别指出的是，SetWindowRgn（）所指定的区域是针对整个窗口的，而Bitblt（）/ StretchBlt（）的输出区域是针对于客户区，两者在定位上是不同的，编程中应加以注意并灵活应用，这也是前面之所以设置边框大小等变量的原因。

5．结束语

这种异形窗口的创建不仅适应于对话框，而且适应于所有的基于CWnd类的派生窗口。采用这一方法，你可以创建出任何只要你能够画出的窗体，实现只要可以画出，就可以做出的目标。

本文代码在Visual C++ 5.0、6.0下调试通过，运行正常，操作系统为Windows98SE。 参考技术A 用css样式啊， <div style="background-image:url('../image/图片名.jpg')">内容内容内容内容内容</div>../image/图片名.jpg' //图片路径 参考技术B 一般是先把地址引用到那个图片，然后把窗口的背景图片属性设置成你引用的图片！

vue取ueditor内容第一张图做封面，无图使用默认图做封面

一、获取第一张图片

获取ueditor内容，并获取第一张图片url

let editHtml = window.myEditor.getContent()

　　　　

let cover = this.getFirstImg(editHtml)

 

getFirstImg (html) {

   var a = html

   var arrimg = []

   a.replace(/<img [^>]*src=[‘"]([^‘"]+)[^>]*>/gi, function (match, capture) {

     arrimg.push(capture)

   })

   if (arrimg != null && arrimg.length > 0) {

     return arrimg[0]

   } else {

     return ‘‘

   }

 }

 

二、图片显示

 <img :src="item.cover" :onerror=‘placeholdImg‘ class="card-img">

 

data () {

　　return {

　　　　placeholdImg: ‘this.src="‘ + require(‘../assets/images/img_placehold.png‘) + ‘"‘

　　}

}

 

onerror事件，当图片加载失败时，原本会显示一个裂开的图标，现在改成自己默认的图片