Question

我在鼠标点击时从形状的中心绘制线条。这很好用，直到我对持有canvas元素的div元素执行旋转。以下是基本的Javascript。 rotateWrapper由页面上其他位置的按钮调用

var p;
var rot = 0;
var canvas;
var ctx;

function rotateWrapper() {
  if (rot == 0) rot = 180;
  else rot = 0;
  $("#wCanvas").rotate({ animateTo:rot,duration:2500});
}

function draw() {
  ctx.save();
  ctx.moveTo(p[0], p[1]);
  ctx.lineTo(p[2], p[3]);

  ctx.closePath();
  ctx.stroke();
  ctx.restore();
}

$(document).ready(function () {
  canvas = $("#imgCanvas").get(0);
  ctx = canvas.getContext("2d");
  $("#imgCanvas").bind({
    mouseup: function(ev) {
      p[2] = ev.pageX;
      p[3] = ev.pageY;
    },
    mousedown: function(ev) {
      p = new Array(4);
      p[0] = $("#wCanvas").width() / 2;
      p[1] = $("#wCanvas").height() / 2;
    }
  });
}

我确定我错过了一些基本的东西，但这让我不得不走上墙。我已经尝试在draw方法中轮换上下文，包括rot的数量，以及它的倒数。因为我正在旋转容器元素我认为这与CSS改变有关，干扰事物但不确定。

任何见解都将受到高度赞赏

Answer 1

“rotate”将为旋转后绘制的元素旋转画布。在没有看到如何调用rotateWrapper和draw的情况下，很难说出应该如何构造代码。但实质上，您应该在想要应用旋转后重绘。您可能希望存储旋转值，并调用将首先应用旋转的中央重绘例程，然后重新绘制。

旋转后画布鼠标坐标

1 个答案: