本文使用writeableBitmap类和HSB、RGB模式来绘制圆形的调色盘。

开源项目地址:https://github.com/ZhiminWei/Palette

RGB为可见光波段三个颜色通道,灰度值范围为0-255,HSB模式,H是色相:取值范围0-360°,S是饱和度:取值范围0-100%,B是亮度:取值范围是0-100%,本文仅展示了部分代码,详细代码见上述项目地址。

程序截图:

中国传统色示例:


渲染圆形调试盘主要代码
		private void RenderColorPicker(double brightness)
{
bitmap = new WriteableBitmap(radius * 2 + 20, radius * 2 + 20, 96.0, 96.0, PixelFormats.Pbgra32, null);
Utility.DrawingAllPixel(bitmap, (x, y) =>
{
RGBColor rgb = new RGBColor(255, 255, 255, 0);
double H = 0;
Vector vector = Point.Subtract(new Point(x, y), new Point(radius + 10, radius + 10));
var angle = Math.Atan(vector.Y / vector.X) * 180 / Math.PI;
if (vector.X < 0)
{
H = 270 + angle;
}
else if (vector.X > 0)
{
H = 90 + angle;
}
else
{
if (vector.Y < 0)
{
H = 0;
}
else if (vector.Y > 0)
{
H = 180;
}
else
{
return new RGBColor(255, (int)(255 * brightness), (int)(255 * brightness), (int)(255 * brightness));
}
}
//计算饱和度
double S;
if (vector.Length >= radius)
{
S = 1;
}
else
{
S = vector.Length / radius;
}
//亮度值
double B = brightness;
return new HSBColor(H, S, B).RgbColor;
});
this.img.Source = bitmap;
} /// <summary>
/// 绘制所有像素
/// </summary>
/// <param name="bitmap"></param>
/// <param name="action"></param>
public static void DrawingAllPixel(WriteableBitmap bitmap, Func<int, int, RGBColor> func)
{
//跨距 :针对跨距(stride)的计算,WritePixels()方法需要跨距。
//从技术角度看,跨距是每行像素数据需要的字节数量。
//可通过将每行中像素的数量乘上所使用格式的每像素位数(通常为4,如本例使用的Bgra32格式)
//然后将所得结果除以8,进而将其从位数转换成字节数。
int stride = bitmap.PixelWidth * bitmap.Format.BitsPerPixel / 8; for (int y = 0; y < bitmap.PixelHeight; y++)
{
for (int x = 0; x < bitmap.PixelWidth; x++)
{
var rgb = func.Invoke(x, y);
byte[] colorData = new byte[4] { (byte)rgb.B, (byte)rgb.G, (byte)rgb.R, (byte)rgb.A }; bitmap.WritePixels(new Int32Rect(x, y, 1, 1), colorData, stride, 0);
}
}
}

WPF绘制圆形调色盘的更多相关文章

  1. 使用canvas绘制6X6调色盘

    <canvas id="canvas" height="150" width="150"></canvas> var ...

  2. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

  3. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

  4. Css绘制圆形,环形,椭圆等图形

    转载自http://blog.csdn.net/gongstrong123/article/details/50888758 绘制圆形,环形,椭圆 <!DOCTYPE html> < ...

  5. [原创工具] ListView 调色盘 (Free)

    说明:ListView 调色盘,用来快速调整 ListView Style 的颜色,能导出 Style 本文,及另存 *.style 或 *.fsf 文件. 适用:Android, iOS, Wind ...

  6. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  7. html5 canvas绘制圆形印章,以及与页面交互

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  9. C#绘制圆形时钟

    本文由作者参考部分案例后加以修改完成: 参考链接如下: http://blog.csdn.net/xuemoyao/article/details/8001113 http://wenku.baidu ...

随机推荐

  1. 06 app分享功能

    通过某一个点击事件触发confirm弹窗 确定后正式进行分享功能处理 这是一个封装好的分享功能插件 https://ext.dcloud.net.cn/plugin?id=4860 如果自己写的话会很 ...

  2. Vue中关于this指向的问题

    由Vue管理的函数 例如: computed 计算属性 watch 监视属性 filters (Vue3中已弃用且不再支持) 过滤器 .... 上述属性里配置的函数不要采用箭头函数写法,因为箭头函数没 ...

  3. 谷歌的SRE和开发是如何合作的

    本文是一篇比较有价值的.介绍SRE的文章.国内的所谓SRE职责其实并不明确,大部分其实还是干普通运维的事.但文中介绍的谷歌的运作方式起点还是相对比较高的,无论对SRE.对开发,甚至对公司都有很高的要求 ...

  4. 2022-7-16 第五组 pan小堂 基础语法

    思维导图 一维数组 数组是存储多个变量(元素)的东西(容器) 这多个变量的数据类型要一致 数组既可以存储基本数据类型,也可以存储引用数据类型. 1.数组定义的格式: 格式1:数据类型[] 数组名; 格 ...

  5. DateFormat类的format方法和parse方法

    /** * 使用DateFormat类中的方法format,把日期格式化为文本 * String format(Date date) 按照指定的模式把Date日期格式化为符合模式的字符串 * 使用步骤 ...

  6. wamp升级php

    1.  停止WAMP服务器. 2.  去网站windows.php.net 下载php-5.4.31-nts-Win32-VC9-x86.zip(32位的). 不要下载THE INSTALLER. 3 ...

  7. vue-cli 启动项目时空白页面

    vue-cli 启动项目时空白页面 在启动项目时 npm run serve / npm run dev 启动 vue 项目空白页:且终端及控制台都未报错 通过各种查阅发现在项目根目录中 vue-co ...

  8. 万答#11,MySQL中char与varchar有什么区别

    万答#11,MySQL中char与varchar有什么区别 1.实验场景 GreatSQL 8.0.25 InnoDB 2.实验测试 2.1 区别 参数 char varchar 长度是否可变 定长 ...

  9. goalng-sync/atomic原子操作

    目录 1.go已经提供了锁,为什么还需要atomic原子操作? 2.atomic原子操作为什么比mutex快? 3.CAS 4.互斥锁与原子操作区别 5.原子操作方法 5.1 atomic.AddIn ...

  10. Linux 04 用户文件

    参考源 https://www.bilibili.com/video/BV187411y7hF?spm_id_from=333.999.0.0 版本 本文章基于 CentOS 7.6 概述 完成用户管 ...