Draw Ruler With Canvas Html5

[shahrzad87]

سلام
برای کشیدن خط با canvas hml5 مشکلی ندارم اما اینکه چطور خط رو بر اساس سانتیمتر و میلیمتر تقسیم بندی کنم رو نمی دونم. برنامه ای دارم می نویسم که کاربر با کلیک موس و drag کردن یک خط کش با طول دلخواه می کشه که قابل rotate هم باشه.

[Javidhb]

canvas با pixel کار میکنه... برای محاسبه سانتیمتر و میلیمتر به مشکل برمیخورید.. چون pixel صفحات نمایش با هم متفاوته...
میتونید راجع به تبدیل PPI به سانتیمتر و ... سرچ کنید.

بازم شما روی صفحه احتیاجی به تبدیل به سانتیمتر ندارید، اگه قصد مقایسه دارید ... میتونید با همون pixel مقایسه کنید.

دمـــو (http://jsfiddle.net/GaB9S/1/)

کد رسم خط کش:
html:


<canvas id="cnvs" height=400 width="600"></canvas>
js:

//تعریف متغیرها
var canvas = document.getElementById("cnvs");
var ctx= canvas.getContext("2d");
var canvasWidth = parseInt(canvas.width);
var canvasHeight = parseInt(canvas.height);

init(); //شروع رسم خطکش


function init()
{
rulerBackground(); //رنگ پشت زمینه
drawLine(); //رسم خطهای روی خط کش
}

function drawLine()
{
var i = 0;
while(i<=canvasWidth)
{
var lineWidth = 1; //عرض خطهای روی خط کش
var lineHeight = 10; //ارتفاع خطها

if ( i % 100 == 0) //مثلا یک سانتی متر- خط بلند و کلفتر
{
lineWidth = 3;
lineHeight = 20;

rulerNumbers(i, lineHeight); //نمایش شماره
}
else if( i % 50 == 0) //مثلا نیم سانتی متر
{
lineWidth = 2;
lineHeight = 15;
}

//رسم خط
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, lineHeight);
ctx.stroke();

i += 10;
}
}

//رسم یک مستطیل بعنوان بک گراند
function rulerBackground()
{
ctx.beginPath();
ctx.rect(0, 0, canvasWidth, 40);
ctx.fillStyle = 'brown';
ctx.fill();
}

//اضافه کردن شماره ها
function rulerNumbers(numX, numY)
{
var num = numX / 100; //شماره

ctx.font="20px Arial";
ctx.fillStyle = 'black';
ctx.fillText(num, numX-5, numY+18);
}



برای حرکت ها خیلی خیلی بهتره که از کتابخونه های آماده استفاده کنید... همینجوری خیلی دردسر داره!
یه نمونه: kineticJs (http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/)

[shahrzad87]

از راهنماییتون ممنونم. البته من یک خط کش داینامیک می خواستم که با کد زیر بهتر انجام میشه. تو این پست گذاشتم که بقیه هم اگر خواستند استفاده کنند.


$(function()
{
var canvas = $('#board');
var context = canvas.get(0).getContext("2d");

var cmLength = 50;
var miliLength = cmLength/10;
var cmSize = 3;
var miliSize = 1;
var cmFont = "10px Tahoma";

function drawLine(x1,y1,x2,y2)
{
var distance = Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2));
var period = distance / miliLength;

var stepX = (x2 - x1) / period;
var stepY = (y2 - y1) / period;

var newX = x1;
var newY = y1;

context.lineWidth = 1;
context.strokeStyle = "rgb(50, 50, 50)";
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.stroke();

var j = 1;
for(var i = 1; i < period ; i++)
{
newX += stepX;
newY += stepY;
if(i%10==0)
{
context.font = cmFont;
context.fillText(j+'cm', newX, newY-10);
context.beginPath();
context.arc(newX, newY, cmSize, 0, Math.PI*2, false);
context.closePath();
context.fill();
j++;
}
else if(i%5 == 0)
{
context.beginPath();
context.arc(newX, newY, cmSize/2, 0, Math.PI*2, false);
context.closePath();
context.fill();
}
context.beginPath();
context.arc(newX, newY, miliSize, 0, Math.PI*2, false);
context.closePath();
context.fill();
}
}

var startPointX, startPointY, endPointX, endPointY;
var drawing = false;
canvas.toggle(function(e){
drawing = true;
startPointX = e.pageX;
startPointY = e.pageY;
}, function(e){
drawing = false;
endPointX = e.pageX;
endPointY = e.pageY;
drawLine(startPointX,startPointY,endPointX,endPoin tY);
});
});

[shahrzad87]

زاویه بین دو خط رو با جاوا اسکریپت می دونید چطور میشه حساب کرد؟ من کد زیر رو نوشتم اما درست جواب نمی ده.


var distance = Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
var distance2 = Math.sqrt(Math.pow((xx2 - xx1), 2) + Math.pow((yy2 - yy1), 2));

var angleTan = (distance - distance2) / (1 + (distance * distance2));
angleTan = angleTan > 0 ? angleTan : -1 * angleTan;

var angle = Math.atan((angleTan))

[shahrzad87]

برای محاسبه زاویه بین دو خط در canvas میشه از این کد استفاده کرد.


var theta1 = Math.atan2((y1 - y2), (x1 - x2));
var theta2 = Math.atan2((yy2 - yy1), (xx2 - xx1));
var theta = (theta2 - theta1) * 180 / Math.PI;

if (theta >= 0)
theta = (theta + 360) % 360;
else
theta = -theta;
var angle = theta.toFixed(2);