如何使用javascript在我的绘画应用程序中选择、移动和调整绘制的线条和形状

我是javascript和应用程序开发的初学者。我正在学习如何在画布上绘制形状和自定义图形。我坚持在画布上选择绘制的形状。我想在画布上选择、移动和调整图形大小

(function() {

var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');

var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));


// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;

sketch.appendChild(tmp_canvas);

var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};

// Pencil Points
var ppts = [];
var shapes = [];
var draggoffx = 0;
var draggoffy = 0;
var selection = null;
var dragging = false;

/* Mouse Capturing Work */

tmp_canvas.addEventListener('mousemove', function(e) {
    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);


/* Drawing on Paint App */
tmp_ctx.lineWidth = 5;
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
tmp_ctx.strokeStyle = 'blue';
tmp_ctx.fillStyle = 'blue';

tmp_canvas.addEventListener('selectStart', function(e){
    e.preventDefault();
    return false;
});

tmp_canvas.addEventListener('mousedown', function(e) {

    tmp_canvas.addEventListener('mousemove', onPaint, false);

    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

    ppts.push({x: mouse.x, y: mouse.y});

    onPaint();
}, false);

tmp_canvas.addEventListener('mouseup', function() {
    tmp_canvas.removeEventListener('mousemove', onPaint, false);

    // Writing down to real canvas now
    ctx.drawImage(tmp_canvas, 0, 0);
    // Clearing tmp canvas
    tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

    // Emptying up Pencil Points
    ppts = [];
}, false);

var onPaint = function() {

    // Saving all the points in an array
    ppts.push({x: mouse.x, y: mouse.y});

    if (ppts.length < 3) {
        var b = ppts[0];
        tmp_ctx.beginPath();
        //ctx.moveTo(b.x, b.y);
        //ctx.lineTo(b.x+50, b.y+50);
        tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, !0);
        tmp_ctx.fill();
        tmp_ctx.closePath();

        return;
    }

    // Tmp canvas is always cleared up before drawing.
    tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

    tmp_ctx.beginPath();
    tmp_ctx.moveTo(ppts[0].x, ppts[0].y);

    for (var i = 1; i < ppts.length - 2; i++) {
        var c = (ppts[i].x + ppts[i + 1].x) / 2;
        var d = (ppts[i].y + ppts[i + 1].y) / 2;

        tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
    }


    tmp_ctx.stroke();
    shapes.push(tmp_ctx);
    console.log(shapes);

};

}());

（函数（）{
var canvas=document.querySelector（“#paint”）；
var ctx=canvas.getContext（'2d'）；
var sketch=document.querySelector（“#sketch”）；
var sketch_style=getComputedStyle（草图）；
canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
//创建tmp画布
var tmp_canvas=document.createElement（'canvas'）；
var tmp_ctx=tmp_canvas.getContext（'2d'）；
tmp_canvas.id='tmp_canvas'；
tmp_canvas.width=canvas.width；
tmp_canvas.height=canvas.height；
草图.附件（tmp_画布）；
变量鼠标={x:0，y:0}；
var last_mouse={x:0，y:0}；
//铅笔尖
var-ppts=[]；
变量形状=[]；
var-draggoffx=0；
var-draggoffy=0；
var选择=null；
var=false；
/*捕鼠工作*/
tmp_canvas.addEventListener（'mousemove'，函数（e）{
mouse.x=e.offsetX的类型！=“未定义”？e.offsetX:e.layerX；
mouse.y=typeof e.offsetY！=“未定义”？e.offsetY:e.layerY；
}，假）；
/*绘画应用程序*/
tmp_ctx.线宽=5；
tmp_ctx.lineJoin='圆形'；
tmp_ctx.lineCap='圆形'；
tmp_ctx.strokeStyle='蓝色'；
tmp_ctx.fillStyle='蓝色'；
tmp_canvas.addEventListener（'selectStart'，函数（e）{
e、 预防默认值（）；
返回false；
});
tmp_canvas.addEventListener（'mousedown'，函数（e）{
tmp_canvas.addEventListener（'mousemove'，onPaint，false）；
mouse.x=e.offsetX的类型！=“未定义”？e.offsetX:e.layerX；
mouse.y=typeof e.offsetY！=“未定义”？e.offsetY:e.layerY；
push（{x:mouse.x，y:mouse.y}）；
onPaint（）；
}，假）；
tmp_canvas.addEventListener（'mouseup'，function（）{
tmp_canvas.removeEventListener（'mousemove'，onPaint，false）；
//现在写下真正的画布
ctx.drawImage（tmp_画布，0,0）；
//清除tmp画布
tmp_ctx.clearRect（0,0，tmp_canvas.width，tmp_canvas.height）；
//清空铅笔尖
ppts=[]；
}，假）；
var onPaint=函数（）{
//保存数组中的所有点
push（{x:mouse.x，y:mouse.y}）；
如果（ppts.长度<3）{
var b=PPT[0]；
tmp_ctx.beginPath（）；
//ctx.moveTo（b.x，b.y）；
//ctx.lineTo（b.x+50，b.y+50）；
tmp_ctx.arc（b.x，b.y，tmp_ctx.lineWidth/2,0，Math.PI*2,0）；
tmp_ctx.fill（）；
tmp_ctx.closePath（）；
返回；
}
//Tmp画布始终在绘制前清除。
tmp_ctx.clearRect（0,0，tmp_canvas.width，tmp_canvas.height）；
tmp_ctx.beginPath（）；
tmp_ctx.moveTo（ppts[0].x，ppts[0].y）；
对于（变量i=1；i

您是否尝试过fabric.js画布库？我认为这是最好的工具，可以帮助您添加选择/调整大小/移动功能到您的数字。有错误吗？还是“只是不起作用”？你能添加更多细节吗？我不想尝试fabric.js。我现在就试试。谢谢你的回复。没有错误。我想向我的绘画应用程序添加额外的功能。它的选择，移动和调整画布上绘制的形状，谢谢你的答复