线条与背景对比颜色(FabricJS & HTML5画布)

Question

我使用的是FabricJS，我需要对比虚线的颜色，这取决于背景。对于相同的虚线，如果背景是白色的，则是蓝色的，如果背景是蓝色的，则是白色的。

画布背景颜色可以改变，但与白色的，我可以添加一个蓝色矩形，并添加一个分隔符(虚线)对整个帆布。

Answer 1

不同的答案取决于您的背景

你知道背景颜色吗？

如果是，只需根据已知的背景色编写一些条件破折号颜色即可。

如果没有，则可以使用var a = context.getImageData(dashX,dashY,1,1).data在仪表符点获取像素RGBA颜色，并设置适当对比的dash颜色。您将得到一个4元素数组，其像素为红色、绿色、蓝色和α值。

另一个可能的问题

如果你的背景不是单色的-- F.ex.，一个图像，问题就来了.然后，您可能不得不做light+dark破折号。您可以通过指定带有黑色阴影的白色破折号(阴影具有2px模糊，因为1px模糊通常是锯齿状)来实现这一点。

下面的示例代码和演示展示了如何绘制双色虚线：

​

​

​

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.lineWidth=3;
ctx.setLineDash([15, 5]);

ctx.fillStyle='black';
ctx.fillRect(0,0,cw,ch/2);
ctx.fillStyle='white';
ctx.fillRect(0,ch/2,cw,ch/2);

dualDashline(0,50,300,50);
dualDashline(0,250,300,250);
dualDashline(0,75,300,200);

function dualDashline(x0,y0,x1,y1){
  ctx.shadowColor='white';
  ctx.shadowBlur=2;
  ctx.strokeStyle='black';
  ctx.beginPath();
  ctx.moveTo(x0,y0);
  ctx.lineTo(x1,y1);
  ctx.stroke();
  ctx.stroke();
  ctx.stroke();
}

body{ background-color: ivory; padding:10px;}
#canvas{border:1px solid red; margin:0 auto; }

<h4>Dual colored dashed lines</h4>
<canvas id="canvas" width=300 height=300></canvas>

​