一个色谱的实现

30 篇文章 4 订阅

问题由来

研究等值线填充的时候,碰到一个问题:在填充的时候需要计算某一等值线值对应的颜色,而RGB颜色是由三个变量决定的值,由红变蓝过程中是哪几个变量在变化,搞不清楚。花了点时间,在ps里拖了几次它的色谱图,才发现规律,其实很简单.

原理

基本颜色(红->(黄)->绿->(青)->蓝)变化其实每次只有1个变量在变化。示意图如下。

颜色rgb
25500
过渡255+0
2552550
过渡2550
绿02550
过渡0255+
0255255
过渡0255
00255

其中+表示颜色递增,-表示颜色份量递减

代码实现

.h
class CColorBar
{
public:
    CColorBar();
    ~CColorBar();
    void SetRange(CRect rc);
    void DrawColorBar(CDC* pDC);
protected:
private:
    BYTE r;
    BYTE g;
    BYTE b;
    CRect rc;

};
.cpp
CColorBar::CColorBar()
{
    r = 0;
    g = 0;
    b = 0;
}
CColorBar::~CColorBar()
{

}
void CColorBar::SetRange(CRect rect)
{
    rc = rect;
}

void CColorBar::DrawColorBar(CDC* pDC)
{
    ASSERT(pDC);
    int deltaC;
    for (int x=rc.left;x<rc.right;x++)
    {
        for (int y=rc.top;y<rc.bottom;y++)
        {
            deltaC = (y-rc.top) * 255 * 4 / rc.Height();

            if (deltaC>=0 && deltaC<=255)
            {
                r = 255;
                g = 0;
                b = 0;
                pDC->SetPixel(x,y,RGB(r,g+deltaC,b));
            }
            if (deltaC>255 && deltaC<=255*2)
            {
                r = 255;
                g = 255;
                b = 0;
                pDC->SetPixel(x,y,RGB(r-deltaC+255,g,b));
            }
            if (deltaC>255*2 && deltaC<=255*3)
            {
                r = 0;
                g = 255;
                b = 0;
                pDC->SetPixel(x,y,RGB(r,g,b+deltaC-255*2));
            }
            if (deltaC>255*3 && deltaC<=255*4)
            {
                r = 0;
                g = 255;
                b = 255;
                pDC->SetPixel(x,y,RGB(r,g-deltaC+255*3,b));
            }
        }
    }
}

结果

如图
结果图片

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Vue实现色谱大卫三角,你可以创建一个Vue组件,并在该组件中使用HTML5的Canvas元素和JavaScript的绘API来实现。下面是一个示例代码: ```html <template> <div> <canvas ref="canvas" width="400" height="400"></canvas> </div> </template> <script> export default { mounted() { this.drawDavidStar(); }, methods: { drawDavidStar() { const canvas = this.$refs.canvas; const ctx = canvas.getContext("2d"); // 绘制大卫三角 function drawTriangle(x, y, size) { ctx.beginPath(); ctx.moveTo(x, y - size / 2); // 上顶点 ctx.lineTo(x + size / 2, y + size / 2); // 右下顶点 ctx.lineTo(x - size / 2, y + size / 2); // 左下顶点 ctx.closePath(); // 渐变色填充 const gradient = ctx.createLinearGradient( x - size / 2, y - size / 2, x + size / 2, y + size / 2 ); gradient.addColorStop(0, "red"); gradient.addColorStop(0.25, "yellow"); gradient.addColorStop(0.5, "green"); gradient.addColorStop(0.75, "blue"); gradient.addColorStop(1, "purple"); ctx.lineWidth = 2; ctx.strokeStyle = "black"; ctx.fillStyle = gradient; ctx.stroke(); ctx.fill(); } // 调用绘制函数 drawTriangle(canvas.width / 2, canvas.height / 2, 200); }, }, }; </script> ``` 在这个示例代码中,我们创建了一个名为`CanvasDavidStar`的Vue组件,并在`mounted`钩子函数中调用了`drawDavidStar`方法来绘制大卫三角形。在绘制过程中,我们使用了渐变色填充来实现色谱效果。 你可以在Vue应用中使用这个组件,将其放置在你需要的地方。当Vue应用运行起来时,你将会看到绘制出的油色谱大卫三角形。记得在Vue应用中引入和注册该组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值