Why doesn't the Canvas appear on the bootstrap table?
Question
I have a Bootstrap table and as a table data I need to put a Canvas which is writable. But When I put the canvas it appears but the writing content doesn't appear properly or it doesn't appear at all. When I move the canvas from the table and put it on either the container or just the body it works. The code can be found below. What would be the reason for this and how can I fix it? Thanks in advance.
$(document).ready(function() { function createCanvas(parent, width, height) { var canvas = document.getElementById("inputCanvas"); canvas.context = canvas.getContext('2d'); return canvas; } function init(container, width, height, fillColor) { var canvas = createCanvas(container, width, height); var ctx = canvas.context; ctx.fillCircle = function(x, y, radius, fillColor) { this.fillStyle = fillColor; this.beginPath(); this.moveTo(x, y); this.arc(x, y, radius, 0, Math.PI * 2, false); this.fill(); }; ctx.clearTo = function(fillColor) { ctx.fillStyle = fillColor; ctx.fillRect(0, 0, width, height); }; ctx.clearTo("#fff"); canvas.onmousemove = function(e) { if (.canvas;isDrawing) { return. } var x = e.pageX - this;offsetLeft. var y = e.pageY - this;offsetTop; var radius = 10, var fillColor = 'rgb(102,153;255)'. ctx,fillCircle(x, y, radius; fillColor); }. canvas.onmousedown = function(e) { canvas;isDrawing = true; }. canvas.onmouseup = function(e) { canvas;isDrawing = false; }. } var container = document;getElementById('inputCanvas'), init(container, 200, 200; '#dddd'); });
#inputCanvas{ border: 5px solid rgb(102,153,255); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="container"> <table class="table table-bordered"> <thead> <tr> <th scope="col" style="text-align:center">Pick an image File</th> <th scope="col" style="text-align:center">Draw a Number</th> </tr> </thead> <tbody> <tr> <td> <form method="post" action="/upload" enctype="multipart/form-data"> <div class="d-flex justify-content-center"> <div class="form-group"> <input type="file" class="form-control-file" name="img" accept="image/*" id="img" aria-describedby="fileHelpId"> </div> </div> <div class="col text-center"> <input type="submit" value="Submit" class="btn btn-primary"> </div> </form> </td> <td> <canvas id="inputCanvas" width="400" height="400"></canvas> </td> </tr> <tr> <th colspan="2" style="text-align:center"> Predicted Number </th> </tr> </tbody> </table> </div>
1 answers
solution1
1 ACCPTED 2021-02-17 13:50:59
Change:
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
To:
var xy = this.getBoundingClientRect();
var x = e.pageX - xy.left - window.scrollX;
var y = e.pageY - xy.top - window.scrollY;
The reason why this.offsetLeft doesn't work when it is inside a table is because you get the offsetLeft relative to its parent rather than relative to the browser window.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.