Konva绘制带等距对角线矩形时颜色不均问题修复求助

问题原因 #

你当前通过大量fillLinearGradientColorStops节点模拟细对角线的方式，当数组长度超过200后出现颜色深浅差异，本质是浏览器线性渐变渲染的精度限制：当相邻颜色节点的间隔过小（比如length=1000时间隔仅0.001），渲染引擎计算颜色过渡时会出现精度丢失，导致红色区域的颜色插值异常。

解决方案 #

方案1：优化渐变颜色节点（贴近原实现思路） #

不需要生成上千个颜色节点，只在需要显示红色线条的位置前后，设置极小范围的渐变区间即可。这种方式既能保证线条粗细可控，又能避免精度问题：

// 定义需要显示红色线条的渐变位置（0.1到0.9，间隔0.1）
const linePositions = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
// 控制线条粗细，值越小线条越细
const lineThickness = 0.001;
const colors = [];

// 为每个线条位置设置渐变节点
linePositions.forEach(t => {
    // 线条左侧：白色
    colors.push(t - lineThickness, '#fff');
    // 线条中心：红色
    colors.push(t, 'red');
    // 线条右侧：白色
    colors.push(t + lineThickness, '#fff');
});

// 补全渐变的首尾颜色，避免边缘异常
colors.unshift(0, '#fff');
colors.push(1, '#fff');

// 绘制矩形
const layer = new Konva.Layer();
const rect1 = new Konva.Rect({
    x: 120,
    y: 20,
    width: 100,
    height: 200,
    fillLinearGradientStartPoint: { x: 0, y: 0 },
    fillLinearGradientEndPoint: { x: 100, y: 200 },
    fillLinearGradientColorStops: colors,
    stroke: "black"
});

方案2：直接绘制Line元素（更高效准确） #

如果不需要通过渐变实现，直接用Konva.Line绘制每条对角线是最可靠的方式，完全避免渐变精度问题，还能支持线条的交互操作：

const layer = new Konva.Layer();

// 先绘制背景矩形
const rect1 = new Konva.Rect({
    x: 120,
    y: 20,
    width: 100,
    height: 200,
    fill: '#fff',
    stroke: "black"
});
layer.add(rect1);

// 计算对角线相关参数：矩形范围、对角线方向向量
const rectX = 120;
const rectY = 20;
const rectWidth = 100;
const rectHeight = 200;
// 对角线方向向量（从左上到右下）
const diagVec = { x: rectWidth, y: rectHeight };
// 垂直于对角线的单位向量（用于计算线条端点）
const perpVec = {
    x: -diagVec.y / Math.hypot(diagVec.x, diagVec.y),
    y: diagVec.x / Math.hypot(diagVec.x, diagVec.y)
};
// 线条粗细
const lineWidth = 1;

// 绘制9条平行对角线
for (let t = 0.1; t <= 0.9; t += 0.1) {
    // 线条在对角线上的中心点
    const centerX = rectX + diagVec.x * t;
    const centerY = rectY + diagVec.y * t;
    // 计算线条的两个端点（向垂直方向延伸，直到超出矩形）
    const halfLength = Math.max(rectWidth, rectHeight);
    const startX = centerX + perpVec.x * halfLength;
    const startY = centerY + perpVec.y * halfLength;
    const endX = centerX - perpVec.x * halfLength;
    const endY = centerY - perpVec.y * halfLength;

    const line = new Konva.Line({
        points: [startX, startY, endX, endY],
        stroke: 'red',
        strokeWidth: lineWidth,
        // 裁剪线条到矩形内部
        clipFunc: (ctx) => {
            ctx.rect(rectX, rectY, rectWidth, rectHeight);
        }
    });
    layer.add(line);
}

两种方案都能解决颜色不均的问题，方案1更贴近你的原始实现，方案2则是更标准的线条绘制方式，根据你的需求选择即可。

内容的提问来源于stack exchange，提问作者Cognia