画布颜色和拖放
[英]Canvas color and drag&drop
问题描述
In my code, I want to change the color of drawings at every step; 
在我的代码中，我想在每一步上更改图纸的颜色； but, if I change the color at 3rd step also the colors in previous steps are also changed to 3rd step color. 但是，如果我在第3步更改颜色，则先前步骤中的颜色也会更改为第3步颜色。 I want to do it my different colors. 我想用不同的颜色做。 I have included 1 or 2 photos for better understanding. 为了更好的理解，我附了1或2张照片。
Also, I want to my drawings draggable but, since I use canvas, I cannot use jquery-ui (.draggable) and also I cannot change my drawings' id because of canvas. 另外，我希望我的图形可以拖动，但是由于我使用画布，所以我不能使用jquery-ui（.draggable），也不能因为画布而更改图形的ID。
jQuery(document).ready(function($) { //Canvas var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //Variables var canvasOffset = $("#canvas").offset(); var canvasx = canvasOffset.left; var canvasy = canvasOffset.top; var last_mousex = 0; var last_mousey = 0; var mousex = 0; var mousey = 0; var mousedown = false; var shapes = []; var width; var height; //Mousedown $(canvas).on('mousedown', function(e) { last_mousex = parseInt(e.clientX - canvasx); last_mousey = parseInt(e.clientY - canvasy); mousedown = true; }); //Mouseup $(canvas).on('mouseup', function(e) { const lastPos = { lastMouseX: last_mousex, lastMouseY: last_mousey, rectWidth: width, rectHeight: height }; shapes.push(lastPos); mousedown = false; }); //Mousemove $(canvas).on('mousemove', function(e) { mousex = parseInt(e.clientX - canvasx); mousey = parseInt(e.clientY - canvasy); if (mousedown) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); width = mousex - last_mousex; height = mousey - last_mousey; var col = $(".color").val(); if (shapes.length > 0) { for (var i in shapes) { ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight); } } ctx.rect(last_mousex, last_mousey, width, height); ctx.strokeStyle = col; ctx.lineWidth = 10; ctx.stroke(); } $("#canvas").mousedown(function(e) { handleMouseDown(e); }); $("#canvas").mousemove(function(e) { handleMouseMove(e); }); $("#canvas").mouseup(function(e) { handleMouseUp(e); }); //Output $('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown); }); });
.color { border: 1px solid black; font-family: 'Times New Roman', Times, serif; font-size: 40px; } #canvas { cursor: crosshair; border: 1px solid #000000; background-image: url("kroki2v3.png"); background-repeat: no-repeat; margin: 0; padding: 0; } #output { font-family: 'Times New Roman', Times, serif; font-size: 40px; }
<html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <input type="text" maxlength="50" class="color" required /> <div id="container" style="display: none;"><img src="kroki2v3.png" id="img01" alt="" style="display: none;"></div> <canvas id="canvas" width="3200" height="1400"></canvas> <div id="output"></div> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2019-07-03 14:49:06
I've made a few changes to your code: 我对您的代码进行了一些更改：
make
var cola global variable使var col为全局变量on mouse up save the color of the current rect:
color:col在鼠标上方保存当前矩形的color:colwhen you draw the shapes in the
shapesarray you need toctx.beginPath()for every rect.当您在shapes数组中绘制形状时，每个矩形都需要ctx.beginPath()。 Also you set the color of the stroke for every rect:ctx.strokeStyle = shapes[i].color;您还可以为每个矩形设置笔触的颜色： ctx.strokeStyle = shapes[i].color;
Observation: you can use the strokeRect() method instead of rect() and stroke() 观察：您可以使用strokeRect（）方法代替rect()和stroke()
In the code I've marked those points where I've made the changes. 在代码中，我标记了进行更改的那些点。 Read the comments. 阅读评论。
jQuery(document).ready(function($) { //Canvas var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //Variables var canvasOffset = $("#canvas").offset(); var canvasx = canvasOffset.left; var canvasy = canvasOffset.top; var last_mousex = 0; var last_mousey = 0; var mousex = 0; var mousey = 0; var mousedown = false; var shapes = []; var width; var height; // make var col a global variable var col = "black"; //Mousedown $(canvas).on('mousedown', function(e) { last_mousex = parseInt(e.clientX - canvasx); last_mousey = parseInt(e.clientY - canvasy); mousedown = true; }); //Mouseup $(canvas).on('mouseup', function(e) { const lastPos = { lastMouseX: last_mousex, lastMouseY: last_mousey, rectWidth: width, rectHeight: height, // save the color of the rect color:col }; shapes.push(lastPos); mousedown = false; }); //Mousemove $(canvas).on('mousemove', function(e) { mousex = parseInt(e.clientX - canvasx); mousey = parseInt(e.clientY - canvasy); if (mousedown) { ctx.clearRect(0, 0, canvas.width, canvas.height); width = mousex - last_mousex; height = mousey - last_mousey; col = $(".color").val(); if (shapes.length > 0) { for (var i in shapes) { // for every shape in the shapes array beginPath ctx.beginPath(); //set the color of the stroke ctx.strokeStyle = shapes[i].color; //draw the rect ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight); ctx.stroke(); } } //for the new rect beginPath ctx.beginPath(); ctx.rect(last_mousex, last_mousey, width, height); ctx.strokeStyle = col; ctx.lineWidth = 10; ctx.stroke(); } /* $("#canvas").mousedown(function(e) { handleMouseDown(e); }); $("#canvas").mousemove(function(e) { handleMouseMove(e); }); $("#canvas").mouseup(function(e) { handleMouseUp(e); });*/ //Output $('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown); }); });
.color { border: 1px solid black; font-family: 'Times New Roman', Times, serif; font-size: 40px; } #canvas { cursor: crosshair; border: 1px solid #000000; background-image: url("kroki2v3.png"); background-repeat: no-repeat; margin: 0; padding: 0; } #output { font-family: 'Times New Roman', Times, serif; font-size: 40px; }
<html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <input type="text" maxlength="50" class="color" required /> <div id="container" style="display: none;"><img src="kroki2v3.png" id="img01" alt="" style="display: none;"></div> <canvas id="canvas" width="3200" height="1400"></canvas> <div id="output"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.