如何在動態畫布上繪制

Question 1

我已經根據數據庫中的記錄動態顯示畫布。目前我在db中有兩條記錄，它在page.Now中顯示了兩個畫布。我應該能夠在兩個畫布上繪制，但是我只能在最后一個畫布上繪制，不能在兩個畫布上繪制。請查看圖像https://ibb.co/n7rvdk5了解更多信息。我得到了ID609，610.It可以是1，2等等。這個id被傳遞到畫布id上，以使其唯一。

<div class="snap-field col-sm-12" style="height: 450px;"> 

    loop here
    <canvas data-fieldid="{{$draw->id}}"  
        id="image-canvas-{{$draw->id}}"
        width="400" height="200"  
        class="image-canvas"
        style="position:absolute;">
    </canvas>
  

</div>

這是我的js部分，在document.ready函數中，我加載了畫布。InitEditableMageCanvas使用唯一id。例如，在本例中，它使用609和610。我可以在id為610的畫布上繪制，但不能在609.Maybe上繪制。我需要在此處進行一些更改，我不確定應該做什么

<script>
    var canvas, ctx, flag = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    dot_flag = false;

var x = "red",
    y = 2;

function initEditableImageCanvas(fieldId) {

    canvas = document.getElementById('image-canvas-' + fieldId);
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    canvas.addEventListener("mousemove", function(e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function(e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function(e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function(e) {
        findxy('out', e)
    }, false);



}

function draw() {

    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
}



function findxy(res, e) {


    if (res == 'down') {

        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.getBoundingClientRect().left;
        currY = e.clientY - canvas.getBoundingClientRect().top;

        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.getBoundingClientRect().left;
            currY = e.clientY - canvas.getBoundingClientRect().top;
            draw();

        }
    }

}
$(document).ready(function() {
    $(".image-canvas").each(function(canvas) {
        //get id 
        initEditableImageCanvas($(this).data("fieldid"));
    });
});
</script>

我正在找人幫忙修理它。我想在所有的畫布上畫畫。有什么幫助嗎？謝謝

Question 2

為了在畫布上繪制，可以將其存儲在變量中，以便應用邏輯。

let canvas = document.getElementById('canvasId');
let ctx = canvas.getContext('2d')
/*   
   Logic   
*/

然而，在您的例子中，由于canvas和ctx是全局變量，因此每次在jQuery的each()中調用initEditableImageCanvas()時，都會重新分配它們。

因此，即使函數findxy()在一個事件（即mousemove）發生時被調用，也不足以繪制正確的位置。您必須檢查它是否指向正確的畫布。

也就是說，為了防止意外行為，在處理多個可繪制的canvas時，更喜歡使用由let語句定義的局部變量，而不是全局變量。一種解決辦法如下：

Change var -> let
將第三個參數（c）添加到findxy()
將參數（ctx）添加到draw()

// get rid of global canvas and ctx    
var flag = false,
  prevX = 0,
  currX = 0,
  prevY = 0,
  currY = 0,
  dot_flag = false;

var x = "red",
  y = 2;

function initEditableImageCanvas(fieldId) {
  // use let
  let canvas = document.getElementById('editable-image-canvas-' + fieldId);
  ctx = canvas.getContext("2d");
  w = canvas.width;
  h = canvas.height;
  /* 
     Attach this to each findxy 
  */
  canvas.addEventListener("mousemove", function(e) {
    findxy('move', e, this)
  }, false);
  canvas.addEventListener("mousedown", function(e) {
    findxy('down', e, this)
  }, false);
  canvas.addEventListener("mouseup", function(e) {
    findxy('up', e, this)
  }, false);
  canvas.addEventListener("mouseout", function(e) {
    findxy('out', e, this)
  }, false);



}

function draw(ctx) {
  // added parameter ctx
  ctx.beginPath();
  ctx.moveTo(prevX, prevY);
  ctx.lineTo(currX, currY);
  ctx.strokeStyle = x;
  ctx.lineWidth = y;
  ctx.stroke();
  ctx.closePath();
}



function findxy(res, e, c) {
  // added parameter c and local ctx
  let ctx = c.getContext('2d')

  if (res == 'down') {

    prevX = currX;
    prevY = currY;
    currX = e.clientX - c.getBoundingClientRect().left;
    currY = e.clientY - c.getBoundingClientRect().top;

    flag = true;
    dot_flag = true;
    if (dot_flag) {
      ctx.beginPath();
      ctx.fillStyle = x;
      ctx.fillRect(currX, currY, 2, 2);
      ctx.closePath();
      dot_flag = false;
    }
  }
  if (res == 'up' || res == "out") {
    flag = false;
  }
  if (res == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = e.clientX - c.getBoundingClientRect().left;
      currY = e.clientY - c.getBoundingClientRect().top;
      draw(ctx); // added argument

    }
  }

}
$(document).ready(function() {
  $(".editable-image-canvas").each(function(canvas) {
    // alert($(this).data("fieldid")) //give id 609 and 610
    initEditableImageCanvas($(this).data("fieldid"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="snap-field col-sm-12" style="height: 450px;"> <div style="display:grid;"> <span>609</span> <canvas data-fieldid="609" id="editable-image-canvas-609" width="200" height="150" class="editable-image-canvas" style="position:relative;top:10%;border:1px dotted; margin-bottom:30px;"> </canvas> <span>610</span> <canvas data-fieldid="610" id="editable-image-canvas-610" width="200" height="150" class="editable-image-canvas" style="position:relative;top:10%;border:1px dotted;"> </canvas> </div><input type="hidden" name="field_{{$draw->id}}" id="editable-image-hidden-{{$draw->id}}"></div>

Answer 1

為了在畫布上繪制，可以將其存儲在變量中，以便應用邏輯。

let canvas = document.getElementById('canvasId');
let ctx = canvas.getContext('2d')
/*   
   Logic   
*/

然而，在您的例子中，由于canvas和ctx是全局變量，因此每次在jQuery的each()中調用initEditableImageCanvas()時，都會重新分配它們。

因此，即使函數findxy()在一個事件（即mousemove）發生時被調用，也不足以繪制正確的位置。您必須檢查它是否指向正確的畫布。

也就是說，為了防止意外行為，在處理多個可繪制的canvas時，更喜歡使用由let語句定義的局部變量，而不是全局變量。一種解決辦法如下：

Change var -> let
將第三個參數（c）添加到findxy()
將參數（ctx）添加到draw()

// get rid of global canvas and ctx    
var flag = false,
  prevX = 0,
  currX = 0,
  prevY = 0,
  currY = 0,
  dot_flag = false;

var x = "red",
  y = 2;

function initEditableImageCanvas(fieldId) {
  // use let
  let canvas = document.getElementById('editable-image-canvas-' + fieldId);
  ctx = canvas.getContext("2d");
  w = canvas.width;
  h = canvas.height;
  /* 
     Attach this to each findxy 
  */
  canvas.addEventListener("mousemove", function(e) {
    findxy('move', e, this)
  }, false);
  canvas.addEventListener("mousedown", function(e) {
    findxy('down', e, this)
  }, false);
  canvas.addEventListener("mouseup", function(e) {
    findxy('up', e, this)
  }, false);
  canvas.addEventListener("mouseout", function(e) {
    findxy('out', e, this)
  }, false);



}

function draw(ctx) {
  // added parameter ctx
  ctx.beginPath();
  ctx.moveTo(prevX, prevY);
  ctx.lineTo(currX, currY);
  ctx.strokeStyle = x;
  ctx.lineWidth = y;
  ctx.stroke();
  ctx.closePath();
}



function findxy(res, e, c) {
  // added parameter c and local ctx
  let ctx = c.getContext('2d')

  if (res == 'down') {

    prevX = currX;
    prevY = currY;
    currX = e.clientX - c.getBoundingClientRect().left;
    currY = e.clientY - c.getBoundingClientRect().top;

    flag = true;
    dot_flag = true;
    if (dot_flag) {
      ctx.beginPath();
      ctx.fillStyle = x;
      ctx.fillRect(currX, currY, 2, 2);
      ctx.closePath();
      dot_flag = false;
    }
  }
  if (res == 'up' || res == "out") {
    flag = false;
  }
  if (res == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = e.clientX - c.getBoundingClientRect().left;
      currY = e.clientY - c.getBoundingClientRect().top;
      draw(ctx); // added argument

    }
  }

}
$(document).ready(function() {
  $(".editable-image-canvas").each(function(canvas) {
    // alert($(this).data("fieldid")) //give id 609 and 610
    initEditableImageCanvas($(this).data("fieldid"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="snap-field col-sm-12" style="height: 450px;"> <div style="display:grid;"> <span>609</span> <canvas data-fieldid="609" id="editable-image-canvas-609" width="200" height="150" class="editable-image-canvas" style="position:relative;top:10%;border:1px dotted; margin-bottom:30px;"> </canvas> <span>610</span> <canvas data-fieldid="610" id="editable-image-canvas-610" width="200" height="150" class="editable-image-canvas" style="position:relative;top:10%;border:1px dotted;"> </canvas> </div><input type="hidden" name="field_{{$draw->id}}" id="editable-image-hidden-{{$draw->id}}"></div>

如何在動態畫布上繪制

熱門問答

如何訪問delta lake中的gold table以獲取web儀表板和其他功能？

Rails-測試控制器創建操作時，沒有與“索引”匹配的路由

使用Python下載雅虎財務數據

R—xts對象中每月的觀測次數（工作日數據）

從2D矩陣構造3D張量

Dropdown list issues

在此基礎上怎么在加一個端口輸出不一樣頻率的波形啊？

ArcGIS Maps SDK for JavaScript vue2 怎么刪除地圖上的圖層

如何在Java項目中使用Javadoc生成模塊化的API文檔

如何在Android中處理來自PHP服務器的復雜JSON結構

由array函數建立的數組的名字必須是什么類型

route用法搭配