Question

我正在Rails应用程序上的模态表单上工作，我想将图形保存在画布上，以便在打开显示视图时可以看到它们。

这是我表格的一部分：

<%= image_tag "body.png", id: "body" %>
<canvas id="myCanvas" width="570" height="570" style="border:1px solid #d3d3d3;"></canvas>

这是我的javascript函数，用于绘制红色填充圆圈

<script type="text/javascript">

  Draw();

  function Draw() {
  var img = document.getElementById("body");
  var cnvs = document.getElementById("myCanvas");
  cnvs.style.position = "absolute";
  cnvs.style.left = img.offsetLeft + "px";
  cnvs.style.top = img.offsetTop + "px";
}

$("#myCanvas").click(function(e){
     getPosition(e); 
});

var pointSize = 10;

function getPosition(event){
     var rect = myCanvas.getBoundingClientRect();
     var x = event.clientX - rect.left;
     var y = event.clientY - rect.top;

     drawCoordinates(x,y);
}

function drawCoordinates(x,y){  
    var ctx = document.getElementById("myCanvas").getContext("2d");


    ctx.fillStyle = "#ff2626"; 

    ctx.beginPath();
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
    ctx.fill();

}


</script>

当我单击画布时，我看到了圆圈，但是当我单击保存底部时，一切都消失了。因此，我正在寻找一种将che圆存储在rails db中的方法

如何在Rails表单上的画布上提交图纸

0 个答案: