使用canvas html5为图像绘制线条轮廓

问题描述

我正在尝试为图像绘制强度分布图，其中x轴为图像上线条的长度，y轴为强度值，沿着线条的长度。如何在html 5 canvas上执行此操作？我尝试了以下代码，但没有获得正确的强度值。不知道我要去哪里错了。

private getLineIntensityVals = function (lineObj,img) {
 const slope = this.calculateSlopeOfLine(lineObj.upPos,lineObj.downPos);
 const intercept = this.calculateIntercept(lineObj.downPos,slope);
 const ctx = img.getContext('2d');
 const coordinates = [];
 const intensities = [];
 for (let x = lineObj.downPos.x; x <= lineObj.upPos.x; x++) {
  const y = slope * x + intercept;
  const pixelData = ctx.getImageData(x,y,1,1).data;
  pixelData[0] = 255 - pixelData[0];
  pixelData[1] = 255 - pixelData[1];
  pixelData[2] = 255 - pixelData[2];
  const intensity = ((0.299 * pixelData[0]) + (0.587 * pixelData[1]) + (0.114 * pixelData[2]));
  intensities.push(intensity);
 }
 return intensities;
};

private calculateSlopeOfLine = function (upPos,downPos) {
 if (upPos.x === downPos.x || upPos.y === downPos.y) {
  return null;
 }
 return (downPos.y - upPos.y) / (downPos.x - upPos.x);
};

private calculateIntercept = function (startPoint,slope) {
  if (slope === null) {
   return startPoint.x;
  }
  return startPoint.y - slope * startPoint.x;
};

private calculateLineLength(line) {
  const dim = {width: Math.abs(line.downPos.x -line.upPos.x),height:Math.abs(line.downPos.y- line.upPos.y)};
  length = Math.sqrt(Math.pow(dim.width,2) + Math.pow(dim.height,2));
  return length;
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）