Question

当使用画布应用变换时，结果文本也（显然）被变换。有没有办法阻止影响文本的某些转换，如反射？

例如，我设置了一个全局变换矩阵，因此Y轴指向上方，X轴指向右侧，(0, 0)点位于屏幕的中心（您期望的是数学坐标系）。

然而，这也使文本颠倒了。

const size = 200;

const canvas = document.getElementsByTagName('canvas')[0]
canvas.width = canvas.height = size;
const ctx = canvas.getContext('2d');

ctx.setTransform(1, 0, 0, -1, size / 2, size / 2);

const triangle = [
  {x: -70, y: -70, label: 'A'},
  {x:  70, y: -70, label: 'B'},
  {x:   0, y:  70, label: 'C'},
];

// draw lines  
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(triangle[2].x, triangle[2].y);
triangle.forEach(v => ctx.lineTo(v.x, v.y));
ctx.stroke();
ctx.closePath();
  
// draw labels
ctx.textAlign = 'center';
ctx.font = '24px Arial';
triangle.forEach(v => ctx.fillText(v.label, v.x, v.y - 8));

<canvas></canvas>

除了手动重置转换矩阵之外，还有一种“智能”方式让文本处于“正确”方向吗？

Answer 1

我的解决方案是旋转画布然后绘制文本。

ctx.scale(1,-1); // rotate the canvas
triangle.forEach(v => {
ctx.fillText(v.label, v.x, -v.y + 25); // draw with a bit adapt position
});

希望有所帮助：）

＆＃13;

const size = 200;

const canvas = document.getElementsByTagName('canvas')[0]
canvas.width = canvas.height = size;
const ctx = canvas.getContext('2d');

ctx.setTransform(1, 0, 0, -1, size / 2, size / 2);

const triangle = [
  {x: -70, y: -70, label: 'A'},
  {x:  70, y: -70, label: 'B'},
  {x:   0, y:  70, label: 'C'},
];

// draw lines  

ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(triangle[2].x, triangle[2].y);
triangle.forEach(v => ctx.lineTo(v.x, v.y));
ctx.stroke();
ctx.closePath();

// draw labels
ctx.textAlign = 'center';
ctx.font = '24px Arial';
ctx.scale(1,-1);
triangle.forEach(v => {
ctx.fillText(v.label, v.x, -v.y + 25);
});

＆＃13;

<canvas></canvas>

＆＃13;

Answer 2

为了建立泰的答案，这很棒，你可能想要考虑以下几点：

    const size = 200;

    const canvas = document.getElementsByTagName('canvas')[0]
    canvas.width = canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Create a custom fillText funciton that flips the canvas, draws the text, and then flips it back
    ctx.fillText = function(text, x, y) {
      this.save();       // Save the current canvas state
      this.scale(1, -1); // Flip to draw the text
      this.fillText.dummyCtx.fillText.call(this, text, x, -y); // Draw the text, invert y to get coordinate right
      this.restore();    // Restore the initial canvas state
    }
    // Create a dummy canvas context to use as a source for the original fillText function
    ctx.fillText.dummyCtx = document.createElement('canvas').getContext('2d');

    ctx.setTransform(1, 0, 0, -1, size / 2, size / 2);

    const triangle = [
      {x: -70, y: -70, label: 'A'},
      {x:  70, y: -70, label: 'B'},
      {x:   0, y:  70, label: 'C'},
    ];

    // draw lines  
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.moveTo(triangle[2].x, triangle[2].y);
    triangle.forEach(v => ctx.lineTo(v.x, v.y));
    ctx.stroke();
    ctx.closePath();
      
    // draw labels
    ctx.textAlign = 'center';
    ctx.font = '24px Arial';
    // For this particular example, multiplying x and y by small factors >1 offsets the labels from the triangle vertices
    triangle.forEach(v => ctx.fillText(v.label, 1.2*v.x, 1.1*v.y));

如果对于您的实际应用程序，您将在绘制非文本对象和绘制文本之间来回切换，并且不希望记得来回翻转画布。（这在当前示例中不是一个大问题，因为你绘制三角形然后绘制所有文本，所以你只需要一次翻转。但是如果你想到一个更复杂的不同应用程序，那可能是一个烦恼。）在上面的例子中，我用自定义方法替换了fillText方法，该方法翻转画布，绘制文本，然后再将其翻转回来，这样您就不必每次想要绘制文本时都手动完成。

结果：

如果你不喜欢覆盖默认的fillText，那么显然你可以创建一个新名称的方法;这样你也可以避免创建虚拟上下文，只需在自定义方法中使用this.fillText。

编辑：上述方法也适用于任意缩放和翻译。 scale(1, -1)只是在x轴上反映画布：在此转换之后，位于（x，y）的点现在将处于（x，-y）。无论平移和缩放如何都是如此。如果您希望文本保持恒定大小而不管缩放，那么您只需通过缩放来缩放字体大小。例如：

<html>
<body>
	<canvas id='canvas'></canvas>
</body>

<script>

	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	var framesPerSec = 100;
	var msBetweenFrames = 1000/framesPerSec;
	ctx.font = '12px Arial';

	function getRandomCamera() {
		return {x: ((Math.random() > 0.5) ? -1 : 1) * Math.random()*5,
			    y: ((Math.random() > 0.5) ? -1 : 1) * Math.random()*5+5,
			    zoom: Math.random()*20+0.1,
				};
	}

	var camera = getRandomCamera();
	moveCamera();

	function moveCamera() {
		var newCamera = getRandomCamera();
		var transitionFrames = Math.random()*500+100;
		var animationTime = transitionFrames*msBetweenFrames;

		var cameraSteps = {	x: (newCamera.x-camera.x)/transitionFrames,
						   	y: (newCamera.y-camera.y)/transitionFrames,
						   	zoom: (newCamera.zoom-camera.zoom)/transitionFrames };
		
		for (var t=0; t<animationTime; t+=msBetweenFrames) {
			window.setTimeout(updateCanvas, t);
		}
		window.setTimeout(moveCamera, animationTime);

		function updateCanvas() {
			camera.x += cameraSteps.x;
			camera.y += cameraSteps.y;
			camera.zoom += cameraSteps.zoom;
			redrawCanvas();
		}
	}

	ctx.drawText = function(text, x, y) {
		this.save();
		this.transform(1 / camera.zoom, 0, 0, -1 / camera.zoom, x, y);
		this.fillText(text, 0, 0);
		this.restore();
	}

	function redrawCanvas() {

		ctx.clearRect(0, 0, canvas.width, canvas.height);

		ctx.save();
		ctx.translate(canvas.width / 2 - (camera.x * camera.zoom),
		            canvas.height / 2 + (camera.y * camera.zoom));
		ctx.scale(camera.zoom, -camera.zoom);

		for (var i = 0; i < 10; i++) {
		    ctx.beginPath();
		    ctx.arc(5, i * 2, .5, 0, 2 * Math.PI);
		    ctx.drawText(i, 7, i*2-0.5);
		    ctx.fill();
		}

		ctx.restore();
	}

</script>

</html>

编辑：基于Blindman67建议的修改文本缩放方法。通过逐渐使相机运动逐渐改进演示。

Answer 3

我采用的方法是存储＆＃34;状态＆＃34;没有实际像素的绘图，并定义了一个draw方法，可以在任何点呈现此状态。

您必须为自己的观点实施自己的scale和translate方法，但我认为它最终值得。

所以，在子弹中：

存储一个＆＃34;要绘制的东西的列表＆＃34; （带标签的点）
公开修改这些＆＃34;事物的scale和translate方法＆＃34;
公开一种draw方法来呈现这些＆＃34;事物＆＃34;

作为一个例子，我创建了一个名为Figure的类，它显示了这些功能的1.0实现。我创建了一个引用画布的新实例。然后我通过传递x，y和label来添加点数。 scale和transform更新了这些要点＆＃39; x和y属性。 draw循环遍历点a）绘制＆＃34; dot＆＃34;，和b）绘制标签。

＆＃13;

const Figure = function(canvas) {
  const ctx = canvas.getContext('2d');
  const origin = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };
  const shift = p => Object.assign(p, {
    x: origin.x + p.x,
    y: origin.y - p.y
  });

  let points = [];

  this.addPoint = (x, y, label) => {
    points = points.concat({
      x,
      y,
      label
    });
  }

  this.translate = (tx, ty) => {
    points = points.map(
      p => Object.assign(p, {
        x: p.x + tx,
        y: p.y + ty
      })
    );
  };

  this.scale = (sx, sy) => {
    points = points.map(
      p => Object.assign(p, {
        x: p.x * sx,
        y: p.y * sy
      })
    );
  };

  this.draw = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();

    const sPoints = points.map(shift);

    sPoints.forEach(p => drawDot(ctx, 5, p.x, p.y));
    sPoints.forEach(p => drawLabel(ctx, p.label, p.x + 5, p.y));

    ctx.fill();
  }
}

const init = () => {
  const canvas = document.getElementById('canvas');
  const fig = new Figure(canvas);

  // Generate some test data
  for (let i = 0, labels = "ABCD"; i < labels.length; i += 1) {
    fig.addPoint(i * 3, (i + 1) * 10, labels[i]);
  }

  const sX = parseFloat(document.querySelector(".js-scaleX").value);
  const sY = parseFloat(document.querySelector(".js-scaleY").value);
  const tX = parseFloat(document.querySelector(".js-transX").value);
  const tY = parseFloat(document.querySelector(".js-transY").value);

  fig.scale(sX, sY);
  fig.translate(tX, tY);
  fig.draw();
}

Array
  .from(document.querySelectorAll("input"))
  .forEach(el => el.addEventListener("change", init));

init();



// Utilities for drawing
function drawDot(ctx, d, x, y) {
  ctx.arc(x, y, d / 2, 0, 2 * Math.PI);
}

function drawLabel(ctx, label, x, y) {
  ctx.fillText(label, x, y);
}

＆＃13;

canvas {
  background: #efefef;
  margin: 1rem;
}

input {
  width: 50px;
}

＆＃13;

<div>
  <p>
    Scales first, translates second (hard coded, can be changed)
  </p>
  <label>Scale x <input type="number" class="js-scaleX" value="1"></label>
  <label>Scale y <input type="number" class="js-scaleY" value="1"></label>
  <br/>
  <label>Translate x <input type="number" class="js-transX" value="0"></label>
  <label>translate y <input type="number" class="js-transY" value="0"></label>
</div>
<canvas id="canvas" width="250" height="250"></canvas>

＆＃13;

注意：使用输入作为其工作原理的示例。我已选择＆＃34;承诺＆＃34;规模的变化和立即翻译，所以订单很重要！您可能希望按全屏来同时获取画布和输入。

Answer 4

替代方案

  var x = 100;
  var y = 100;
  var pixelRatio = 2;
  var transform = {"x": 0, "y": 0, "k": 1}

  context.save();
  context.setTransform(pixelRatio, 0.0, 0.0, pixelRatio, 0.0, 0.0);
  context.translate(transform.x, 0);
  context.scale(transform.k, 1);

  context.save();
  // get Transformed Point
  var context_transform = context.getTransform();
  var pt = context_transform.transformPoint({
        x: x,
        y: y
      });

  // Reset previous transforms
  context.setTransform(pixelRatio, 0.0, 0.0, pixelRatio, -pt.x, -pt.y);
  

  // draw with the values as usual
  context.textAlign = "left";
  context.font = "14px Arial";
  context.fillText("Hello", pt.x, pt.y);
  context.restore();

  context.restore();

用于书写文字的“撤消”画布转换

4 个答案: