Question

我是HTML5 canvas＆amp; amp;的新手JavaScript，我试图绘制多个鼠标点击，在文件上传图像上移动矩形在画布上，如何做到这一点？我尝试了一些想法，但是当我在图像画布上绘制矩形时，图像突然消失了。

这是我的代码：

<script>
(function() {
var canvas = new fabric.Canvas('panel');

var line, isDown, startPosition={}, rect,drawingMode=true;

canvas.on('mouse:down', function(event){
 if (!drawingMode) return;
    isDown = true;
    console.log(event.e.clientX,event.e.clientY);
    startPosition.x=event.e.clientX;
    startPosition.y=event.e.clientY;

    console.log(startPosition);
        rect=new fabric.Rect({
            left:event.e.clientX,
            top:event.e.clientY,
            width:0,
            height:0,
            stroke:'red',
            strokeWidth:3,
            fill:''
        });
        canvas.add(rect);
});

canvas.on('mouse:move', function(event){
    if (!isDown || !drawingMode) return;

     rect.setWidth(Math.abs( event.e.clientX-startPosition.x ));
     rect.setHeight(Math.abs( event.e.clientY -startPosition.y ));

    canvas.renderAll();
});

canvas.on('mouse:up', function(){
    isDown = false;
    
     canvas.add(rect);
    
//      window.alert("hi");
});

canvas.on('object:selected', function(){
    drawingMode = false;         
});

canvas.on('object:selected', function(){
    drawingMode = false;         
});
canvas.on('selection:cleared', function(){  
    drawingMode = true;      
});

})();
</script>
  <input type='file' id="fileUpload" onChange="readURL(this);" accept="image/*" style="margin-top: 30px; margin-left: 80px;" >     
<script>
function el(id){return document.getElementById(id);} // Get elem by ID
var canvas  = el("panel");
var context = canvas.getContext("2d");


function readImage() {
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
           var img = new Image();
           img.addEventListener("load", function() {
             context.drawImage(img, 0, 0, 700, 450);
           });
           img.src = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
    }
}
el("fileUpload").addEventListener("change", readImage, false);    
</script>

 <html lang="en" >
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
</head>
     
     
     
<body>
    <div class="container">
        <div class="column1">
        
            <canvas id="panel" width="700" height="450" style="border: 2px solid black; width: 500px;height: 400px;"></canvas>
            <input type='file' id="fileUpload" onChange="readURL(this);" accept="image/*" style="margin-top: 30px; margin-left: 80px;" >
        </div>
 
</div>

另外，我把这个代码搞砸了：

jsfiddle.net/mahbub_rahman/m04c3smj/5

感谢您的帮助。

Answer 1

你想这样吗？

检查此fiddle link。

nav#main ul li  {
text-align: right;
text-decoration: none;
display:inline-block;
}

#main{
text-align: right;
 }


<nav id="main">
<ul>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>   
</nav>

当我在文件上传的图像上绘制鼠标单击矩形时，图像突然消失

1 个答案: