Question

当我单击画布矩形上的两个位置时，它会被绘制，但是我得到了矩形的错误位置，以便响应画布大小。我试图用画布和窗口宽度缩放指针位置，但我仍然面临一些问题。

llc -filetype=obj -o Define.o Define.ll
ghc --make Use.hs Define.o

Answer 1

我用你的代码制作了一个小提琴。

http://fiddle.jshell.net/3j81t254/1/

问题是你没有在Windows调整大小上更新比例，你不应该使用比例因子缩放宽度和高度，而是在点击事件中缩放光标位置。

$(window).resize(function () {
  var pwidth = $("#panel").parent().parent().width();
  var pheight = $("#panel").parent().parent().height();
  // canvas.width = width;
  $(".lower-canvas").css("width", pwidth);
  $(".lower-canvas").css("height", 'auto');

  $("#panel").css("height", 'auto');
  var panelheight = $("#panel").height();
  var panelwidth = $("#panel").width();
  //update scale factor
  scale = pwidth/ 700;
  $(".canvas-container").css("height", panelheight);
  $(".canvas-container").css("width", panelwidth);
});



    if (clicks == 0) {
      var pointer = canvas.getPointer(event.e);
      //scale this
      x1 = pointer.x / scale;
      y1 = pointer.y / scale;
      console.log("Start Pointer " + x1, y1);
      clicks++;
    } else {
      var endpointer = canvas.getPointer();
      //scale this
      var endx = endpointer.x / scale;
      var endy = endpointer.y / scale;
      console.log("Endpointer  " + endx, endy);
      console.log("x and y" + x1, y1);
      var newwidth = (endx - x1);
      var newheight = (endy - y1);
   }

在响应式环境中使用画布尚不支持fabricjs，这里和那里存在很多问题。祝你好运

响应式画布中的矩形位置错误

1 个答案: