我想在我的绘画应用程序中绘制一个平行四边形。我有一块帆布

时间：2014-01-08 05:52:55

标签： jquery css html5

我有初始和最后一个坐标（在鼠标点击和onmouseleave上）。如何找到剩余的坐标并在画布上绘制平行四边形

3 个答案:

答案 0 :(得分：0)

如果你已经拥有x0 / y0和x3 / y3，你可以找到其他坐标：

var width = 10; //choose your parallelogram width

x1 = x0 + width;
y1 = y0;

x2 = x3 + width;
y2 = y3;

然后绘制：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.stroke();

答案 1 :(得分：0)

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#tools").hide();
$("#shapes").click(function(){
$("#tools").toggle();
});
 $("#draw").hide();
$("#cancel").hide();
$("#rows").hide();
$("#tableoptions").hide();

$("#textoptions").hide();

     $("#table").click(function(){
    $("#draw").show();
    $("#cancel").show();
    $("#rows").show();
    $("#col").show();
    $("#tableoptions").show();
    });


    $("#draw").click(function(){
    //table();
    });

    $("#cancel").click(function(){

    $("#rows").hide();

    $("#col").hide();
    $("#draw").hide();
    $("#cancel").hide();
    $("#tableoptions").hide();
    });
    $("#text").click(function() {
    $("#textoptions").show();
    });
                   $("#canceltext").click(function(){
    $("#textoptions").hide();
    });

}); 

</script>
<style>
body
{
background: Skyblue;
}
#shapes
{
top:200px;
}
#buttons
{
display:block;
}
#container
{
overflow:hidden;
}
#tools
{
background:Aqua;
float:left;
}

    #sketch {
float:left;
border: 10px solid black;
      margin-left: 50px;
        width: 700px;
        height: 500px;
        position: relative;
background:white;
    }

    #tmp_canvas {
        position: absolute;
        left: 0; right: 0;
        bottom: 0; top: 0;
        cursor: crosshair;
    }
</style>
</head>
<body>

<b>TITLE</b><input type="text" id="title" > 
<br>
<br>
<input type="file" id="f" name="fname"><br><br>
Stroke color: <select id='strokeStyleSelect'>
<option value='red'>red</option>
<option value='green'>green</option>
<option value='blue'>blue</option>
<option value='orange'>orange</option>
<option value='cornflowerblue'>cornflowerblue</option>
<option value='goldenrod'>goldenrod</option>
<option value='navy' >navy</option>
<option value='purple'>purple</option>
<option value='purple'>purple</option>
</select>
Fill color: <select id='fillStyleSelect'>
<option value='rgba(255,0,0,0.5)'>semi-transparent red</option>
<option value='green'>green</option>
<option value='rgba(0,0,255,0.5)'>semi-transparent blue</option>
<option value='orange'>orange</option>
<option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option>
<option value='goldenrod' >goldenrod</option>
<option value='navy'>navy</option>
<option value='purple'>purple</option>
</select>
Line width: <select id='lineWidthSelect'>
<option value='1.0'>1.0</option>
<option value='2.0'>2.0</option>
<option value='3.0'>3.0</option>
<option value='4.0'>4.0</option>
<option value='5.0'>5.0</option>
<option value='6.0'>6.0</option>
</select>
Opacity: <select id='op'>

      <option value='100'>0</option>
                      <option value='0.2'>1</option>
                      <option value='0.4'>2</option>
                      <option value='0.6'>3</option>
                      <option value='6'>4</option>
                      <option value='8'>5</option>
                      <option value='10'>6</option>
                   </select>
Fill <input id='fillCheckbox' type='checkbox' checked/>
<div id="container" >
<button id="shapes" type="button" ><img src="shapes.jpg" width="40" height="40" style="border:1px solid black;"/></button>&nbsp; &nbsp;<br>
<div id="tools"  style="border:1px solid black;" align="center">&nbsp; &nbsp;
<button id="brush" type="button" ><img src = "scribble.jpg" width="40" height="40" style="border: 1px solid black;"/></button>&nbsp; &nbsp;<br>
<button id = "rectangle" type = "button"><img src="rect.jpg" width="40" height="40"  /></button><br>
<button id = "line" type="button" ><img src="line.jpg" width="40" height="40" ></button><br>
<button id = "circle" type="button"><img src="circle.jpg"/ width="40" height="40"></button><br>
<button id="parallel" type="button"><img src="parallel.jpg" width="40" height="40"/></button><br>
<button id="ellipse" type="button"><img src="ellipse.jpg" width="40" height="40"/></button><br>
<button id="arrow" type="button"><img src="arrow.jpg" width="40" height="40"/></button><br>
<button id="table" type="button"><img src="table.jpg" width="40" height="40"/></button><br>
<button id = "text" type="button"><img src="text.jpg" width=40" height="40"/></button><br>
<div id="textoptions">
<input type="text" id="val" name="text" placeholder="enter text" size="10"><br>
<button type="button" id="entertext" onclick="text()">Ok</button>
<button type="button" id="canceltext" onclick="cancelText()">Cancel</button>
</div>
<div id="tableoptions">
<input id="rows" type="text" placeholder="rows" size="1">
<input id="col" type="text" placeholder="cols" size="1"><br>
<button type="button" id="draw" onclick="table()"  style="width:20;">Draw</button>
<button type="button" id="cancel" onclick="cancel()" style="width:20;">Cancel</button>
</div>
<button type="button" id="erase"><img src="eraser.jpg" width="40" height="40" /></button>
</div>
<br><br>
<div id="sketch" >
    <canvas id="paint"></canvas>
</div>
</div>
<br><br>
<div id="button">
<button type="button" onclick="saveCanvas()">Save</button>
<button type="button" onclick="clearC()">Clear</button>
<!--<button type="button" id="erase" onclick="erase()">Erase</button>-->
<button type="button" onclick="cUndo()">Undo</button>
<button type="button" onclick="cRedo()">Redo</button>
<!--<button type="button" onclick="drawGrid(ctx,'lightgray',20,20)">Grid</button>-->
</div>
<script>


var tool = ' ';
        $('#tools button').on('click', function(){
            tool = $(this).attr('id');
            console.log(tool);
        });
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'));

var isText = false;

// 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 start_mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};

/* 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);




tmp_canvas.addEventListener('mousedown', function(e) {
tmp_ctx.lineWidth=  lineWidthSelect.value;
    tmp_ctx.strokeStyle = strokeStyleSelect.value;
    tmp_ctx.globalAlpha =op.value;      
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
                mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

                start_mouse.x = mouse.x;
                start_mouse.y = mouse.y;

if(tool == 'line'){
tmp_canvas.addEventListener('mousemove', onLinePaint, false);
                onLinePaint();
}
else if(tool == 'rectangle'){
tmp_canvas.addEventListener('mousemove', onRectPaint, false);
onRectPaint();
}                           
else if(tool == 'brush'){
tmp_canvas.addEventListener('mousemove', onBrushPaint, false);
onBrushPaint();
}
else if(tool == 'circle'){
tmp_canvas.addEventListener('mousemove', onCirclePaint, false);
onCirclePaint();
}
else if (tool == 'ellipse'){
tmp_canvas.addEventListener('mousemove', onEllipsePaint,false);
onEllipsePaint();
}

else if(tool == 'parallel'){
tmp_canvas.addEventListener('mousemove', onParallelPaint,false);
onParallelPaint();
}
else if (tool == 'arrow')
{
tmp_canvas.addEventListener('mousemove', onArrowPaint,false);
onArrowPaint();
}
else if(tool = 'erase')

{
tmp_canvas.addEventListener('mousemove', onErase, false);
              onErase();
}

else if(tool == 'draw')
{
tmp_canvas.addEventListener('mousemove', onTablePaint,false);
onTablePaint;
}
else if(tool=='cancel')
{
tmp_canvas.removeEventListener('mousemove',onTablePaint,false);
}

else if(tool == 'entertext')
{
isText = true;

if (isText == true) {
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== ' undefined' ? e.offsetY : e.layerY;
var a= mouse.x;
var b= mouse.y;
var t= document.getElementById("val").value;
ctx.font='italic 20px sans-serif';
ctx.fillText(t,a,b);
}
}
else if( tool=='canceltext' )
{

isText = false;

}

else
{
tmp_canvas.addEventListener('mousedown',function(){
tmp_canvas.onmousedown = null;
},false);
}


}, false);

tmp_canvas.addEventListener('mouseup', function() {
tmp_canvas.removeEventListener('mousemove', onLinePaint, false);
tmp_canvas.removeEventListener('mousemove', onRectPaint, false);
tmp_canvas.removeEventListener('mousemove', onBrushPaint, false);
tmp_canvas.removeEventListener('mousemove',onCirclePaint,false);    
tmp_canvas.removeEventListener('mousemove',onEllipsePaint,false);   
tmp_canvas.removeEventListener('mousemove',onParallelPaint,false);
tmp_canvas.removeEventListener('mousemove', onArrowPaint,false);
tmp_canvas.removeEventListener('mousemove',onTablePaint,false);
tmp_canvas.removeEventListener('mousemove', onErase,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);
cPush();                            
ppts = [];


 }, false);









/*Touch Capturing Work */
        tmp_canvas.addEventListener('touchmove', function(e) {

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




tmp_canvas.addEventListener('touchstart', function(e) {
    tmp_ctx.lineWidth=  lineWidthSelect.value;
    tmp_ctx.strokeStyle = strokeStyleSelect.value;
    tmp_ctx.globalAlpha =op.value;  
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
                mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

                start_mouse.x = mouse.x;
                start_mouse.y = mouse.y;





if(tool == 'line'){
tmp_canvas.addEventListener('touchmove', onLinePaint, false);
                onLinePaint();
}
else if(tool == 'rectangle'){
tmp_canvas.addEventListener('touchmove', onRectPaint, false);
onRectPaint();
}                           
else if(tool == 'brush'){
tmp_canvas.addEventListener('touchmove', onBrushPaint, false);
onBrushPaint();
}
else if(tool == 'circle'){
tmp_canvas.addEventListener('touchmove', onCirclePaint, false);
onCirclePaint();
}
else if (tool == 'ellipse'){
tmp_canvas.addEventListener('touchmove', onEllipsePaint,false);
onEllipsePaint();
}

else if(tool == 'parallel'){
tmp_canvas.addEventListener('touchmove', onParallelPaint,false);
onParallelPaint();
}
else if (tool == 'arrow')
{
tmp_canvas.addEventListener('touchmove', onArrowPaint,false);
onArrowPaint();
}

else if(tool == 'draw')
{
tmp_canvas.addEventListener('touchmove', onTablePaint,false);
onTablePaint;
}
else if(tool=='cancel')
{
tmp_canvas.removeEventListener('touchmove',onTablePaint,false);
}
else if(tool == 'entertext')
{
isText = true;
if (isText == true) {
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== ' undefined' ? e.offsetY : e.layerY;
var a= mouse.x;
var b= mouse.y;
var t= document.getElementById("val").value;
tmp_ctx.font='italic 20px sans-serif';
tmp_ctx.fillText(t,a,b);
}

}
else if( tool=='canceltext' )
{

isText = false;

}
else if(tool = 'erase')

{
tmp_canvas.addEventListener('touchmove', onErase, false);
              onErase();
}

/*else 
{
tmp_canvas.removeEventListener('touchstart',f
}*/




}, false);

tmp_canvas.addEventListener('touchend', function() {


tmp_canvas.removeEventListener('touchmove', onLinePaint, false);
tmp_canvas.removeEventListener('touchmove', onRectPaint, false);
tmp_canvas.removeEventListener('touchmove', onBrushPaint, false);
tmp_canvas.removeEventListener('touchmove',onCirclePaint,false);    
tmp_canvas.removeEventListener('touchmove',onEllipsePaint,false);   
tmp_canvas.removeEventListener('touchmove',onParallelPaint,false);
tmp_canvas.removeEventListener('touchmove', onArrowPaint,false);
tmp_canvas.removeEventListener('touchmove',onTablePaint,false);
tmp_canvas.removeEventListener('touchmove', onErase,false);
drawGrid(tmp_ctx,'Grey',25,25);
// 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);
cPush();                            
ppts = [];
//ppt=[];

 }, false);


document.addEventListener('touchmove', function(e) {
e.preventDefault();
},
false
);












/*LINE*/
var onLinePaint = function() {
// 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(start_mouse.x, start_mouse.y);
tmp_ctx.lineTo(mouse.x, mouse.y);
tmp_ctx.stroke();
tmp_ctx.closePath();
};
 /*RECTANGLE*/
var onRectPaint = function() {
// Tmp canvas is always cleared up before drawing.
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
 var x = Math.min(mouse.x, start_mouse.x);
var y = Math.min(mouse.y, start_mouse.y);
var width = Math.abs(mouse.x - start_mouse.x);
var height = Math.abs(mouse.y - start_mouse.y);
tmp_ctx.strokeRect(x, y, width, height);
if (fillCheckbox.checked)
      tmp_ctx.fillRect(x,y,width,height);
};

/*CIRCLE*/
var onCirclePaint = function()
{
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
var x = (mouse.x + start_mouse.x) / 2;
var y = (mouse.y + start_mouse.y) / 2;
var radius = Math.max(Math.abs(mouse.x - start_mouse.x),
Math.abs(mouse.y - start_mouse.y)) / 2;
tmp_ctx.beginPath();
tmp_ctx.arc(x, y, radius, 0, Math.PI*2, false);
// tmp_ctx.arc(x, y, 5, 0, Math.PI*2, false);
tmp_ctx.stroke();
tmp_ctx.closePath();
if (fillCheckbox.checked)
      tmp_ctx.fill();
};


/*ELLIPSE*/
var onEllipsePaint = function()
{
tmp_ctx.clearRect(0,0,tmp_canvas.width,tmp_canvas.height);
var x = Math.min(mouse.x, start_mouse.x);
var y = Math.min(mouse.y,start_mouse.y);
var w = Math.abs(mouse.x - start_mouse.x);
var h = Math.abs(mouse.y - start_mouse.y);
drawEllipse(tmp_ctx,x,y,w,h);
};
function drawEllipse(ctx,x,y,w,h)
{
var kappa = .5522848;
var ox = (w/2)* kappa,
oy = (h/2)*kappa,
xe = x + w,
ye = y + h,
xm = x + w / 2,
ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x,ym);
ctx.bezierCurveTo(x,ym - oy, xm - ox, y,xm,y);
ctx.bezierCurveTo(xm + ox, y,xe,ym - oy, xe,ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye,xm,ye);
ctx.bezierCurveTo(xm - ox, ye,x,ym + oy,x,ym);
ctx.closePath();
ctx.stroke();
if (fillCheckbox.checked)
      tmp_ctx.fill();
}

/*PARALLEL*/
var onParallelPaint = function()
{
tmp_ctx.clearRect(0,0,tmp_canvas.width,tmp_canvas.height);
var k= Math.min(mouse.x, start_mouse.x);
var l= Math.min(mouse.y,start_mouse.y);
var width = Math.abs(mouse.x - start_mouse.x);
var height = Math.abs(mouse.y - start_mouse.y);
tmp_ctx.beginPath();
tmp_ctx.moveTo(k+ width*0.3, l);
tmp_ctx.lineTo(k, l + height);
tmp_ctx.lineTo(k + width*0.7, l + height);
tmp_ctx.lineTo(k + width, l);
tmp_ctx.lineTo(k + width*0.3, l);
tmp_ctx.closePath();  
tmp_ctx.stroke();
if (fillCheckbox.checked)
      tmp_ctx.fill();
};

 // Pencil Points
var ppts = [];
var onBrushPaint = 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);
}
// For the last 2 points
tmp_ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
tmp_ctx.stroke();
};

/*ARROW*/

var onArrowPaint = function()
{
tmp_ctx.clearRect(0, 0,tmp_canvas.width,tmp_canvas.height);
var x1 = start_mouse.x;
var y1 = start_mouse.y;
var x2 = mouse.x;
var y2 = mouse.y;
tmp_ctx.beginPath();
tmp_ctx.moveTo(x1, y1);
tmp_ctx.lineTo(x2, y2);
tmp_ctx.stroke();
tmp_ctx.closePath();
var endRadians=Math.atan((y2-y1)/(x2-x1));
endRadians+=((x2>x1)?90:(-90))*Math.PI/180;
drawArrowhead(tmp_ctx,x2,y2,endRadians);
};
function drawArrowhead(ctx,x,y,radians)
{
ctx.save();
ctx.beginPath();
ctx.translate(x,y);
ctx.rotate(radians);
ctx.moveTo(0,0);
ctx.lineTo(8,20);
ctx.lineTo(-8,20);
ctx.closePath();
ctx.fill();
ctx.restore();
}   


/*ERASER*/
var ppt = [];
var onErase = function() {
//tmp_ctx.lineWidth=20;
//tmp_ctx.strokeStyle = "White";
//tmp_ctx.globalAlpha=100;
ppt.push({x: mouse.x, y: mouse.y});
if (ppt.length < 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();
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(ppt[0].x, ppts[0].y);
for (var i = 1; i < ppt.length - 2; i++) {
var c = (ppt[i].x + ppt[i + 1].x) / 2;
var d = (ppt[i].y + ppt[i + 1].y) / 2;
tmp_ctx.quadraticCurveTo(ppt[i].x, ppt[i].y, c, d);
}
// For the last 2 points
tmp_ctx.quadraticCurveTo(
ppt[i].x,
ppt[i].y,
ppt[i + 1].x,
ppt[i + 1].y
);
tmp_ctx.stroke();
drawGrid(tmp_ctx,'lightgray',20,20);
};


/*TABLE*/
var onTablePaint = function()
{
tmp_ctx.clearRect(0, 0,tmp_canvas.width,tmp_canvas.height);
var x = mouse.x;
var y = mouse.y;
var a= start_mouse.x;
var b= start_mouse.y;
var k = Math.min(x,a);
var l=Math.min(y, b);
var width=Math.abs(x-a);
var height=Math.abs(y-b);
tmp_ctx.strokeRect(k, l, width, height );
var r=document.getElementById("rows").value;
var c=document.getElementById("col").value;
var stepx = width/c;
var stepy = height/r;
if((start_mouse.x > mouse.x) && (start_mouse.y < mouse.y))
{
for( var i =0 ,j=r;i<r,j>0;i++,j--)
{
tmp_ctx.beginPath();
tmp_ctx.moveTo(x,(y-(i*stepy)));
tmp_ctx.lineTo(a,(b+(j*stepy)));
tmp_ctx.stroke();
}
for( var i =0 ,j=c;i<c,j>0;i++,j--)
{
tmp_ctx.beginPath();
tmp_ctx.moveTo((x+(i*stepx)),y);
tmp_ctx.lineTo((a-(j*stepx)),b);
tmp_ctx.stroke();
}
}
else if((start_mouse.x > mouse.x)&&( start_mouse.y > mouse.y))
{
for( var i =0 ,j=c;i<c,j>0;i++,j--)
{
tmp_ctx.beginPath();
tmp_ctx.moveTo((x+(i*stepx)),y);
tmp_ctx.lineTo((a-(j*stepx)),b);
tmp_ctx.stroke();
}
for( var i =0 ,j=r;i<r,j>0;i++,j--)
{
tmp_ctx.beginPath();
tmp_ctx.moveTo(x,(y+(i*stepy)));
tmp_ctx.lineTo(a,(b-(j*stepy)));
tmp_ctx.stroke();
}
}
else if(( start_mouse.x < mouse.x) &&(start_mouse.y > mouse.y))
{
for( var i =0 ,j=c;i<c,j>0;i++,j--)
{
tmp_ctx.beginPath();
tmp_ctx.moveTo((x-(i*stepx)),y);
tmp_ctx.lineTo((a+(j*stepx)),b);
tmp_ctx.stroke();
}
for( var i =0 ,j=r;i<r,j>0;i++,j--)
{
tmp_ctx.beginPath();
tmp_ctx.moveTo(x,(y+(i*stepy)));
tmp_ctx.lineTo(a,(b-(j*stepy)));
tmp_ctx.stroke();
}
}
else if(( start_mouse.x < mouse.x)&& ( start_mouse.y < mouse.y))
{
var a = mouse.x;
var b = mouse.y;
var x= start_mouse.x;
var y= start_mouse.y;
for( var i =0 ,j=c;i<c,j>0;i++,j--)
{
tmp_ctx.beginPath();
tmp_ctx.moveTo((x+(i*stepx)),y);
tmp_ctx.lineTo((a-(j*stepx)),b);
tmp_ctx.stroke();
}
for( var i =0 ,j=r;i<r,j>0;i++,j--)
{
tmp_ctx.beginPath();
tmp_ctx.moveTo(x,(y+(i*stepy)));
tmp_ctx.lineTo(a,(b-(j*stepy)));
tmp_ctx.stroke();
}
}
};



/*TEXT*/
/*var onTextPaint = function()
{
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== ' undefined' ? e.offsetY : e.layerY;
var a= mouse.x;
var b= mouse.y;
var t= document.getElementById("val").value;
ctx.font='italic 20px sans-serif';
ctx.fillText(t,a,b);
cPush();
};*/



/*DRAWGRID*/
function drawGrid ( ctx, color,stepx,stepy)
{
ctx.strokeStyle=color;
ctx.lineWidth = 0.5;
for( var i = stepx + 0.5; i< ctx.canvas.width; i+=stepx)
{
ctx.beginPath();
ctx.moveTo(i,0);
ctx.lineTo(i,ctx.canvas.height);
ctx.stroke();
}
for (var i = stepy + 0.5; i< ctx.canvas.height; i+=stepy)
{
ctx.beginPath();
ctx.moveTo(0,i);
ctx.lineTo(ctx.canvas.width,i);
ctx.stroke();

}
}



/*UNDO AND REDO*/
var cPushArray = new Array();
var count = -1; 
function cPush() 
{

count++;
if (count < cPushArray.length) 
{ 
cPushArray.length = count;
}
cPushArray.push(document.getElementById("paint").toDataURL());
}
function cUndo() {
//alert("undo");
ctx.clearRect(0,0,canvas.width, canvas.height);
if (count > 0) 
{
count--;
var canvasPic = new Image();
canvasPic.src = cPushArray[count];
canvasPic.onload = function () { 
ctx.drawImage(canvasPic, 0, 0); 
}
}
drawGrid(ctx,'lightgray',20,20);
}
function cRedo() {
if (count < cPushArray.length-1) {
count++;
ctx.clearRect(0,0,canvas.width, canvas.height);
var canvasPic = new Image();
canvasPic.src = cPushArray[count];
canvasPic.onload = function () 
{
ctx.drawImage(canvasPic, 0, 0); 
}
}
}

/*IMAGE UPLOAD*/

function loadImageFileAsURL()
{
var filesSelected = document.getElementById("f").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) 
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;       
imageLoaded.width = canvas.width;
imageLoaded.height = canvas.height;
 ctx.globalAlpha = 0.5;
ctx.drawImage(imageLoaded,0,0);
};
fileReader.readAsDataURL(fileToLoad);
}
}

cPush();
}
document.getElementById("f").onchange = function () {
loadImageFileAsURL();
}

/*SAVE*/
function saveCanvas() {
var titl = document.getElementById("title").value;
var fileName = titl+".html" ;
var dataURL = canvas.toDataURL();
document.getElementById('tmp_canvas').src = dataURL;
var fileURL= document.getElementById('tmp_canvas').src ;
document.write("<div id='t1'>");
document.write("<img alt='' src="+fileURL+">");
document.write("</div>");

if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = "data:text/plain;base64,"+window.btoa(document.getElementById('t1').innerHTML);
save.download = fileName ;
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0,false, false, false, false, 0, null);
save.dispatchEvent(evt);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
 }
}
/*CLEAR CANVAS*/
function clearC()
{
//alert("clear");
ctx.clearRect(0,0,canvas.width, canvas.height);
drawGrid(ctx,'lightgray',20,20);

}
op.onchange = function(e)
{
tmp_ctx.globalAlpha = op.value;
};
strokeStyleSelect.onchange = function(e)
{
tmp_ctx.strokeStyle = strokeStyleSelect.value;
};
lineWidthSelect.onchange = function(e)
{
tmp_ctx.lineWidth = lineWidthSelect.value;
};
fillStyleSelect.onchange = function (e)
{
tmp_ctx.fillStyle = fillStyleSelect.value;
};
tmp_ctx.strokeStyle = strokeStyleSelect.value;
tmp_ctx.lineWidth = lineWidthSelect.value;
tmp_ctx.fillStyle = fillStyleSelect.value;
tmp_ctx.globalAlpha = op.value;
drawGrid(ctx,'lightgray',20,20);
</script>

</body>`enter code here`
</html>

答案 2 :(得分：0)

平行四边形不能仅由两个点定义。您将至少需要两个（对角）点和一个角度。即一个三角形，并知道哪一点与三角形的侧面相对，而不是平行四边形的一部分。

在具有用户点击界面的情况下，您可以考虑要求用户点击三个点（A，B，C）。那么，平行四边形的最后一个点D是点B在AC线上的反射。

或者，将点D计算为Dx = Cx +（Ax-Bx）和Dy = Cy +（Ay-By）可能会更容易。结果将与反射相同。

相关问题
最新问题