我要评论wpf中的图片组件，本身是支持不同的拉伸效果。具体如下：
- none, 不做拉伸
- fill 完全填充（会变形）
- uniform 等比缩放，不会变形
- uniformtofill 等比缩放，并完全填充。不会变形，但是长的部分会被裁剪
但是，如果我们要实现像qq或者微信这样子的聊天气泡功能，直接使用图片组件就无法满足要求了。
我们可以观察下微信的聊天气泡，他的宽度和高度可以根据我们输入的内容自动调整，并且背景图片也不会存在变形的问题。
今天我们就用wpf来实现这个功能！
要实现不变形的拉伸功能，我们可以针对1个像素来进行拉伸，这样拉伸出来的图片，除了拉伸区域的像素都是一样的，其它区域还是保留了原来的图片的外观。
这里主要需要用到 croppedbitmap类，该类主要用于裁剪，可以对 bitmapimage进行裁剪。
微信聊天气泡这种场景，它需要支持水平和垂直的方向的拉伸效果，我们可以利用 croppedbitmap，将原始图片裁剪成9张图，渲染的时候，我们分别将9张图渲染到对应的位置。拉伸的区域就是9张图中的上面中间位置，下面中间位置，左边中间位置，右边中间位置以及最中间的位置。这几张图片，都按1个像素进行裁剪，这样就不会出现拉伸的图片了。
关键代码：
//根据裁剪区域，获取裁剪后的图片。imagesource指的是原始图片
private imagesource getcroppedbitmap(double x, double y, double width, double height)
{
return new croppedbitmap(imagesource, new int32rect((int)x, (int)y, (int)width, (int)height));
}
/// <summary>
/// 获取水平偏移像素值
/// </summary>
/// <returns></returns>
private int gethorizontaloffset()
{
return (int)(horizontalprecent * imagesource.width / 100);
}
/// <summary>
/// 获取垂直位置的偏移像素值
/// </summary>
/// <returns></returns>
private int getverticaloffset()
{
return (int)(verticalprecent * imagesource.height / 100);
}
/// <summary>
/// 获取水平偏移像素值
/// </summary>
/// <returns></returns>
private int getstretchheight()
{
return (int)(rendersize.height - imagesource.height);
}
/// <summary>
/// 获取垂直位置的偏移像素值
/// </summary>
/// <returns></returns>
private int getstretchwidth()
{
return (int)(rendersize.width - imagesource.width);
}
/// <summary>
/// 水平拉伸是否可用
/// </summary>
private bool ishorizontalstretchenabled
{
get
{
if (horizontalprecent > 0 && horizontalprecent < 100)
{
return true;
}
return false;
}
}
/// <summary>
/// 按水平方向进行裁剪的偏移量
/// </summary>
public double horizontalprecent { get; set; }
/// <summary>
/// 按垂直方向进行裁剪的偏移量
/// </summary>
public double verticalprecent { get; set; }
//绘制水平+垂直拉伸的方法
protected override void onrender(drawingcontext drawingcontext)
{
//这个需要9张图
//左上，左中，左下，右上，右中，右下，水平中，垂直中
var horizontaloffset = gethorizontaloffset();
var verticaloffset = getverticaloffset();
var lefttop = getcroppedbitmap(0, 0, horizontaloffset, verticaloffset);
var leftbottom = getcroppedbitmap(0, verticaloffset + 1, horizontaloffset, imagesource.height - verticaloffset - 1);
var righttop = getcroppedbitmap(horizontaloffset + 1, 0, imagesource.width - horizontaloffset - 1, imagesource.height - verticaloffset - 1);
var rightbottom = getcroppedbitmap(horizontaloffset + 1, verticaloffset + 1, imagesource.width - horizontaloffset - 1, imagesource.height - verticaloffset - 1);
//最中间的
var center = getcroppedbitmap(horizontaloffset, verticaloffset, 1, 1);
var leftcenter = getcroppedbitmap(0, verticaloffset + 1, horizontaloffset, 1);
var rightcenter = getcroppedbitmap(horizontaloffset + 1, verticaloffset + 1, imagesource.width - horizontaloffset - 1, 1);
var topcenter = getcroppedbitmap(horizontaloffset + 1, 0, 1, verticaloffset);
var bottomcenter = getcroppedbitmap(horizontaloffset + 1, verticaloffset + 1, 1, imagesource.height - verticaloffset - 1);
//------------------------------- 上面的逻辑是切图，下面的逻辑是绘制 -----------------------------------
var stretchheight = getstretchheight();
if (stretchheight < 0) stretchheight = 0;
var stretchwidth = getstretchwidth();
if (stretchwidth < 0) stretchwidth = 0;
drawingcontext.drawimage(lefttop, new rect(0, 0, horizontaloffset, verticaloffset));
drawingcontext.drawimage(righttop, new rect(horizontaloffset + stretchwidth, 0, imagesource.width - horizontaloffset - 1, imagesource.height - verticaloffset));
//绘制水平方向的拉伸像素
if (stretchheight > 0)
{
drawingcontext.drawimage(leftcenter, new rect(0, verticaloffset, horizontaloffset, stretchheight));
drawingcontext.drawimage(rightcenter, new rect(horizontaloffset + stretchwidth, verticaloffset, imagesource.width - horizontaloffset - 1, stretchheight));
}
//绘制垂直方向的拉伸像素
if (stretchwidth > 0)
{
drawingcontext.drawimage(topcenter, new rect(horizontaloffset, 0, stretchwidth, verticaloffset));
drawingcontext.drawimage(bottomcenter, new rect(horizontaloffset, verticaloffset + stretchheight, stretchwidth, imagesource.height - verticaloffset - 1));
}
//绘制中间拉伸的像素
if (stretchheight > 0 && stretchwidth > 0)
{
drawingcontext.drawimage(center, new rect(horizontaloffset, verticaloffset, stretchwidth, stretchheight));
}
drawingcontext.drawimage(leftbottom, new rect(0, verticaloffset + stretchheight, horizontaloffset, imagesource.height - verticaloffset - 1));
drawingcontext.drawimage(rightbottom, new rect(horizontaloffset + stretchwidth, verticaloffset + stretchheight, imagesource.width - horizontaloffset - 1, imagesource.height - verticaloffset - 1));
}
//仅支持水平方向拉伸
protected override void onrender(drawingcontext drawingcontext)
{
var horizontaloffset = gethorizontaloffset();
var left = getcroppedbitmap(0, 0, horizontaloffset, imagesource.height);
var center = getcroppedbitmap(horizontaloffset, 0, 1, imagesource.height);
var right = getcroppedbitmap(horizontaloffset + 1, 0, imagesource.width - horizontaloffset - 1, imagesource.height);
drawingcontext.drawimage(left, new rect(0, 0, horizontaloffset, imagesource.height));
var stretchwidth = getstretchwidth();
if (stretchwidth > 0)
{
drawingcontext.drawimage(center, new rect(horizontaloffset, 0, stretchwidth, imagesource.height));
}
else
{
stretchwidth = 0;
}
drawingcontext.drawimage(right, new rect(horizontaloffset + stretchwidth, 0, imagesource.width - horizontaloffset - 1, imagesource.height));
}
//仅支持垂直方向拉伸
protected override void onrender(drawingcontext drawingcontext)
{
var verticaloffset = getverticaloffset();
var top = getcroppedbitmap(0, 0, imagesource.width, verticaloffset);
var center = getcroppedbitmap(0, verticaloffset, imagesource.width, 1);
var bottom = getcroppedbitmap(0, verticaloffset + 1, imagesource.width, imagesource.height - verticaloffset - 1);
drawingcontext.drawimage(top, new rect(0, 0, imagesource.width, verticaloffset));
var stretchheight = getstretchheight();
if (stretchheight > 0)
{
drawingcontext.drawimage(center, new rect(0, verticaloffset, imagesource.width, stretchheight));
}
else
{
stretchheight = 0;
}
drawingcontext.drawimage(bottom, new rect(0, verticaloffset + stretchheight, imagesource.width, imagesource.height - verticaloffset - 1));
}
//测量布局大小，这里要记得重写下。这个版本不支持不同尺寸的分辨率，可以通过计算缩放比来实现
private size measurecore(size size, imagesource imgsource)
{
if (imgsource == null) return size;
size naturalsize;
if (ishorizontalstretchenabled && isverticalstretchenabled)
{
naturalsize = new size(size.width, size.height);
}
else if (ishorizontalstretchenabled)
{
naturalsize = new size(size.width, imgsource.height);
}
else if (isverticalstretchenabled)
{
naturalsize = new size(imgsource.width, size.height);
}
else
{
return size;
}
return naturalsize;
}
以上代码就可以实现水平拉伸，垂直拉伸或者水平+垂直拉伸的功能了。目前的测试代码还不支持不同分辨率的图片，demo中的计算是使用了imagesource的宽高。如果需要支持任意分辨率，可以按渲染的宽高和图片的实际宽高做个比例缩放运算即可。
到此这篇关于wpf实现图片按像素拉伸的文章就介绍到这了,更多相关wpf图片按像素拉伸内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论