ایک ڈیجیٹل ایٹچ ایک خاکہ بنائیں

اس ٹیوٹوریل میں، ہم میکانی ڈرائنگ کھلونا ایٹچ ایک حوصلہ افزائی کے طور پر ایک حوصلہ افزائی اور جدید آلات کے لئے ان خصوصیات کو لاگو کرنے کی کوشش کرتے ہیں، ویب ٹیکنالوجیز کے ساتھ. (Aptly نامزد) کینوس کا استعمال کرتے ہوئے، ہم سب سے پہلے گولیاں پر توجہ مرکوز کرتے ہیں، جو مستند کھلونا میں شکل میں ہیں. ہم ڈائلوں کو کنٹرول کرنے کے لئے رابطے کے واقعات کا فائدہ اٹھا سکتے ہیں، اور آلہ موشن کے واقعات کو مواد کو ختم کرنے کے لئے. فون چھوڑنے سے باہر نہیں، ہم یہ بھی تلاش کریں گے کہ WebSockets کو کنٹرول اور ڈرائنگ کے علاقے کو تقسیم کرکے امکانات کو بڑھانے کے لئے کیسے استعمال کریں گے.

01. اثاثوں کو حاصل کریں

یہ سبق node.js استعمال کرے گا. ہم شروع ہونے سے پہلے، جاؤ فائلیلو ، سبق کے آگے مفت سامان اور مفت مواد منتخب کریں - یہاں آپ ٹیوٹوریل کے لئے آپ کو اثاثوں کو ڈاؤن لوڈ کرسکتے ہیں. پھر مندرجہ ذیل حکموں کو چلائیں، جو انحصار انسٹال کریں اور سرور کو شروع کریں گے. ہم A بنانے کے لئے نوڈ کا استعمال کر رہے ہیں LocalHost. ، اور یہ بھی websockets کے لئے بعد میں خدمت کرے گا.

 این پی ایم انسٹال
نوڈ سرور / index.js 

02. ڈرا () تقریب کا استعمال کریں

میں main.js. ، ڈرا () فنکشن ہماری درخواست کا مرکز ہے. ہم دو پوائنٹس کے درمیان ایک لائن کو اپنی طرف متوجہ کرنے کے لئے کینوس کا استعمال کرتے ہیں؛ اصل (X1، Y1)، جہاں ہم نے آخری بار اپنے ڈرائنگ کو چھوڑ دیا، اور منزل (X2، Y2)، جس میں ہم پہنچنا چاہتے ہیں. ہمیں اب ڈرائنگ کے کسی بھی شکل کا مشاہدہ کرنے کے لئے اس فنکشن کو ٹرگر کرنے کی ضرورت ہے.

 فنکشن ڈرا (X1، Y1، X2، Y2) {
  // سیاحت میں عالمی سطح پر مقرر کیا جاتا ہے ()
  context.beginpath ()؛
  Context.Moveto (X1، Y1)؛
  Context.Lineto (X2، Y2)؛
  contexter.stroke ()؛
} 

03. کی بورڈ کے واقعات کو لاگو کریں

ہم ڈائلوں کو لاگو کرنے سے پہلے، چلو جلدی ایک کی بورڈ سننے والے کو شامل کریں جو ہماری ڈرا فنکشن کو متحرک کرسکتے ہیں. آپ پہلے ہی مختلف کے ساتھ فراہم کی گئی ہیں keycodes. مثال کے طور پر، لیکن آپ کو ٹرگر کرنے کے لئے تھوڑا سا سننے والے میں ترمیم کرنے کی ضرورت ہوگی ڈرا () تقریب ہم نے پہلے بیان کیا. اب اپنے براؤزر کو تازہ کریں اور دیکھیں کہ آپ تیر کی چابیاں کے ساتھ کیا کرسکتے ہیں.

 دستاویز. Addeventlistener ('keydowndown'، تقریب (ای) {
  / * KeyCode سوئچ یہاں جاتا ہے * /
  ڈرا (ریاضی. فلور (prev_horizontal)، ریاضی. فلور (prev_vertical)، ریاضی. فلور (افقی)، ریاضی. فلور (عمودی)؛
  prev_verical = عمودی؛
  prev_horizontal = افقی؛
})؛ 

04. کینوس کا سائز تبدیل کریں

آپ نے محسوس کیا ہے کہ ہمارے کینوس کے عنصر کو ابھی تک اس کا تعین نہیں کیا گیا ہے. ہمارے ڈرائنگ بورڈ کے لئے، ہم بڑی جگہ چاہتے ہیں، شاید پوری ونڈو بھی. ذیل میں کوڈ کا سائز تبدیل کرنے کا خیال رکھتا ہے، لیکن کال کرنا مت بھولنا ایڈجسٹ فریم () میں اس میں() اس کے ساتھ ساتھ.

 فنکشن ایڈجسٹ فریم () {
  // کینوس میں عالمی سطح پر وضاحت کی جاتی ہے ()
  canuany.width = window.innerwidth؛
  کینوس. Hight = ونڈو .innerheight؛
}
ونڈو. Addeventlistener ('سائز تبدیل کریں'، ایڈجسٹ فریم)؛ 

05. ایک فریم شامل کریں

ہم چاہتے ہیں کہ درخواست کو اصل کھلونا جیسے ممکنہ طور پر نظر آتے ہیں، لہذا ہم ڈرائنگ کے علاقے کے ارد گرد ایک فریم شامل کرنا چاہتے ہیں. ایسا کرنے کے لئے، ہم ایک مارجن قیمت کی وضاحت کر سکتے ہیں اور سی ایس ایس کے لئے ترمیم کرسکتے ہیں #sketch. مارجن: 20px آٹو؛ کینوس کو افقی طور پر مرکز اور ڈائلوں کے لئے نچلے حصے میں بڑی جگہ کو برقرار رکھنے کے لئے.

 وار frameMarginvertical = 122؛
وار frameMarginhorizontal = 62؛
فنکشن ایڈجسٹ فریم () {
  canuany.width = window.innerwidth - frameMarginhorizontal؛
  کینوس. hight = window.innerheight - frameMarginverical؛
} 

06. ڈائلز بنائیں

ہم نے پہلے ہی آپ کو ڈائلوں کے لئے سی ایس ایس دیا ہے عوامی / سی ایس ایس / شیلیوں. css. لہذا ایک نظر رکھنے کے لئے آزاد محسوس کرتے ہیں. اگلا، دو شامل کریں & lt؛ div & gt؛ ٹیگز کے تحت & lt؛ کینوس اور جی ٹی؛ ایچ ٹی ایم ایل فائل میں، جیسا کہ ذیل میں بیان کیا گیا ہے. ایک کنونشن کے طور پر، ہم افقی ڈرائنگ کے لئے بائیں ڈائل استعمال کریں گے، اور عمودی کے حق میں. ہم بھی نئے متغیرات کو شامل کر رہے ہیں اس میں() رابطے کے واقعات کے لئے تیار کرنے کے لئے فنکشن.

 & lt؛ div id = "dialhorizontal" کلاس = "ڈائل" & gt؛ & lt؛ / div & gt؛
& lt؛ div id = "ڈائلریٹیکل" کلاس = "ڈائل" اور جی ٹی؛ & lt؛ / div & gt؛ 

 var tordtleft = docount.getelementByid ('dialhorizontal')؛
var regionleft = نیا zingtouch.region (aargleftft)؛
Var Targetright = Docess.GetelementByid ('DiLvertical')؛
Var Regionright = New Zingtouch.Region (hartright)؛ 

07. zingtouch کا استعمال کریں

ZingTouch ایک جاوا اسکرپٹ لائبریری ہے جو مختلف ٹچ اشاروں کا پتہ لگانے کے قابل ہے، اور ماؤس کے واقعات کو بھی سنبھال لیں گے. یہ آپ کے لئے فراہم کی جاتی ہے / عوامی / lib / فولڈر، جیسا کہ ہم اسے اپنے ڈائالوں کو کنٹرول کرنے کے لئے استعمال کرتے ہیں. ذیل میں بائیں کنٹرول کے لئے عمل درآمد ہے؛ آپ کو دوسری طرف اس کی نقل اور ترمیم کرنے کی ضرورت ہوگی.

 regionleft.bind (targeleft، 'گھومنے'، تقریب (ای) {
  اگر (e.detail.distancefromlast & lt؛ 0) {
  - Horizontal؛
  } اور
  ++ افقی؛
  }
  AngleHorizontal + = e.detail.distancefromlast؛
  targeleft.style.transform = 'گھومنے (' + زاویہورڈ + 'ڈگری)'؛
  ڈرا (ریاضی. فلور (prev_horizontal)، ریاضی. فلور (prev_vertical)، ریاضی. فلور (افقی)، ریاضی. flow_verfor)؛
  prev_horizontal = افقی؛
})؛ 

08. ڈائل کی حد کو لاگو کریں

آف اسکرین جانے سے لائنوں کو روکنے کے لئے، ہم استعمال کرتے ہیں Candraw () فنکشن، جو ایک بولین واپس آتا ہے. ہم یہ سمت، یا تو 'افقی' یا عمودی '، اور افقی یا عمودی متغیر کی قیمت کو منتقل کرتے ہیں. ہم اس فنکشن کو 'دونوں ڈائلوں کے سننے والے کو' گھومنے 'میں کہتے ہیں، اور صرف اس صورت میں' سچ 'کیا ہم زاویہ میں اضافہ کرتے ہیں اور کہتے ہیں ڈرا () فنکشن

 فنکشن Candraw (سمت، قیمت) {
  Var زیادہ سے زیادہ = (سمت === 'افقی')؟ (canuans.width) :( canue.height)؛
  اگر (ویلیو & lt؛ 2 || ویلیو اور جی ٹی؛ میکس - 2) {
  غلط واپسی
  }
  سچ واپس لو
} 

09. ڈائل کے مسائل سے بچیں

جس حد تک ہم نے ابھی لاگو کیا ہے، وہاں ایک موقع ہے کہ ڈائل ایک اختتام پر پھنس سکتا ہے اگر قیمت حد تک حد تک ہو جاتی ہے، یہاں تک کہ ایک ڈس کلیمر نقطہ نظر سے. اس صورت حال سے بچنے کے لئے، ہمیں اس معاملے کو ہینڈل کرنا چاہئے جہاں Candraw () غلط ہے اور افقی کنٹرولر کے لئے یہاں دکھایا گیا ہے، پہلے سے ہی درست ایک سے قیمت کو دوبارہ ترتیب دیں:

 اگر (Candraw ('افقی'، افقی)) {
  AngleHorizontal + = e.detail.distancefromlast؛
  targeleft.style.transform = 'گھومنے (' + زاویہورڈ + 'ڈگری)'؛
  ڈرا (ریاضی. فلور (prev_horizontal)، ریاضی. فلور (prev_vertical)، ریاضی. فلور (افقی)، ریاضی. flow_verfor)؛
  prev_horizontal = افقی؛
} اور
  افقی = prev_horizontal؛
} 

10. اپنی ٹیبلٹ پر ڈرائنگ بورڈ حاصل کریں

یہ ہمیشہ آپ کے ھدف کردہ آلات پر ٹیسٹ کرنے کی سفارش کی جاتی ہے. ہماری درخواست اب ایک اچھی شکل میں ہے، اور واقعات کو چھونے کا جواب دے سکتا ہے. اپنے ٹیبلٹ پر ڈرائنگ بورڈ حاصل کرنے کے لۓ مقامی ہسٹسٹ تک رسائی حاصل کرنے کے اقدامات پر عمل کریں.

اگلا، ہم ایک رکن پر درخواست کا معائنہ کرنے کے لئے سفاری اور ترقی کے مینو کا استعمال کریں گے. لوڈ، اتارنا Android آلات کے لئے، استعمال کروم: // معائنہ .

11. تیز رفتار کی جانچ پڑتال کریں

اپنے ٹیبلٹ کو USB کے ذریعہ اپنے کمپیوٹر پر مربوط کریں اور ڈویلپر کے اوزار کا استعمال کرتے ہوئے درخواست کا معائنہ کریں.

مندرجہ ذیل کوڈ کے ساتھ، آپ کو مختلف تیز رفتار اقدار کو دیکھنے کے قابل ہونا چاہئے، کیونکہ آپ اپنے آلے کے ارد گرد منتقل کرتے ہیں. کینوس کو ری سیٹ کرنے کے لئے، ہم نے 5 سے زائد ایکس محور پر ایک تیز رفتار پر غور کرنے کا فیصلہ کیا ہے، اور آہستہ آہستہ دھندلاپن کو کم کرنا ( خراب ).

 var eraseate = 1؛ / * ایک عالمی متغیر کے طور پر وضاحت * /
ونڈو. Addeventlistener ('DevicMotion'، تقریب (ایونٹ) {
  کنسول .log ('تیز رفتار ::'، ایونٹ. accenteration)؛
  اگر (event.acceleration.x & gt؛ 5) {
  eraseate - = math.abs (event.acceleration.x / 100)؛
  کنسول. log ('ختم ::'، eraseate)؛
  }
})؛ 

12. حذف کرنے کے لئے ہلا

ہم نے پچھلے مرحلے میں موشن اور تیز رفتار کی جانچ پڑتال کیسے کی ہے. ہمیں اب کال کرنے کی ضرورت ہے fadedrawing () جب ہماری حالت ملتی ہے. اس مثال میں، ہم ایک مختلف دھندلاپن میں کینوس کی ایک عین مطابق کاپی Redraw.

گلوبلففا کو 1 میں دوبارہ ترتیب دیں ڈرا () اور سیٹ GlobalCompositeoperation. ذریعہ سے زیادہ واپس.

 فنکشن fadedrawing () {
  اگر (eraseate & lt؛ 0) {
  context.clearrect (0، 0، کینوس. width، کینوس. hight)؛
  eraseate = 1؛
  واپسی
  }
  context.globalalpha = eraseate؛
  context.globalcompositeoperation = 'کاپی'؛
  Context.drawimage (کینوس، 0، 0)؛
} 

13. یہ حقیقی ڈیل کی طرح نظر آتے ہیں

اب تک، ہماری درخواست بہت نرم اور فلیٹ لگ رہی ہے. کچھ گہرائی دینے کے لئے، ہم ایک فریم رنگ، فریم کے اندر ایک سائے اور ڈائلوں پر تھوڑا سا حجم شامل کریں گے. ڈائل سائے کے لئے سی ایس ایس پہلے سے ہی فراہم کی جاتی ہے، لیکن آپ کو جسم کے اختتام پر ان دو عناصر کو شامل کرنے کی ضرورت ہوگی.

یہاں پیش کردہ عناصر کے لئے سی ایس ایس مکمل کریں:

 & lt؛ div id = "dialshadowhorizontal" کلاس = "شیڈو" اور GT؛ & lt؛ / div & gt؛
& lt؛ div id = "dialshadowvertical" کلاس = "شیڈو" اور GT؛ & lt؛ / div & gt؛ 

 جسم {
  پس منظر: # 09CBF7؛
}
#sketch {
  باکس-سائے: 2px 2px 10px RGBA (0، 0، 0، .25) انصاف؛
} 

14. WebSockets کا استعمال کریں

اس سبق کے آغاز میں، ہم نے ہمارے نوڈ سرور کے ذریعہ WebSockets کا استعمال کرتے ہوئے مختصر طور پر ذکر کیا. اب آپ کے پاس ٹیبلٹ کے لئے ایک اسٹائل ڈرائنگ پیڈ ہے، ہم آپ کے فون کے لئے بھی دستیاب کرنے کے لۓ دیکھیں گے. تاہم، اسکرین اور کنٹرول دونوں کو ظاہر کرنے کے لئے فون بہت چھوٹا ہوسکتا ہے. لہذا ہم فون اور کمپیوٹر اسکرین کے درمیان بات چیت کرنے کے لئے ساکٹ استعمال کرتے ہیں.

15. آلہ کا سائز کا پتہ لگائیں

اہم HTML فائل میں، تبدیل main.js. کے ساتھ Extra.js. . بعد میں ہم نے ابھی تک سب کچھ کیا ہے، آلات اور ساکٹ کو سنبھالنے کے لئے ترمیم کے ساتھ، جس میں ہم مندرجہ ذیل اقدامات میں معائنہ کریں گے. ایک نظر ہے detectdevice () - یہ طریقہ اب بجائے بوجھ پر بلایا جاتا ہے اس میں() اور فیصلہ کرے گا کہ کس طرح 'موڈ' درخواست کے لئے ہینڈل کرنے کے لئے.

ذیل میں ایک فون کا پتہ چلا خاص معاملہ ہے:

 اگر (ونڈو. innerwidth & lt؛ 768) {
  ساکٹ = io.cnect ()؛
  دستاویز. query سیلسٹیکٹر ('# خاکہ'). ہٹا دیں ()؛
  Var Dalls = Docess.QuerySelectorall ('ڈائل، .shadow')؛
  [] .Foreach.call (ڈائل، فنکشن (آئٹم) {
  آئٹم. Classlist.add ('بگ')؛
  })؛
  iscontrols = سچ؛
  frameMarginvertical = 62؛
  ساکٹ .میٹ (تیار '، {تیار': 'کنٹرول'})؛
} 

16. فون سے کمپیوٹر سے

بھر میں Extra.js. آپ کوڈ کے بٹس کو نوٹس کریں گے ساکٹ .emit () یا ساکٹ. () . یہ ہمارے کنٹرول (فون) اور اسکرین (کمپیوٹر) مثال کے لئے emitters اور سننے والے ہیں. ہر منسلک ایونٹ کو سرور کے ذریعے جانے کی ضرورت ہے تاکہ تمام منسلک ساکٹ میں دوبارہ تقسیم ہوجائے. میں سرور \ index.js. 'کنکشن' کی تقریب میں چند مزید سننے والوں کو شامل کریں اور نوڈ سرور کو دوبارہ شروع کریں.

 ساکٹ. ('ڈرا'، فنکشن (ڈیٹا) {
  io.sockets.emit ('ڈرا'، ڈیٹا)؛
})؛
ساکٹ. ('ختم'، فنکشن (ڈیٹا) {
  io.Sockets.emit ('ختم'، ڈیٹا)؛
})؛
ساکٹ.on ('ایڈجسٹ فریم'، فنکشن (ڈیٹا) {
  ScreenWidth = Data.Screenwidth؛
  ScreenHeight = Data.Screenheight؛
  io.Sockets.emit ('ایڈجسٹ فریم'، ڈیٹا)؛
})؛ 

17. فون واقفیت کو درست کریں

اپنے کمپیوٹر پر مقامی ہسٹسٹ ملاحظہ کریں، جبکہ آپ کے فون سے دور دور تک رسائی حاصل کرنے کے دوران (جیسے آپ نے پہلے ہی آپ کے ٹیبلٹ سے کیا تھا). آپ کو اپنے فون پر ڈائلوں کو تبدیل کرتے وقت آپ کو اپنی اسکرین پر اب ایک لائن تیار کیا جانا چاہئے. آپ کو اطلاع ملے گی، تاہم، اگر فون پورٹریٹ موڈ میں ہے تو ڈائالوں کو مناسب طریقے سے مناسب طریقے سے فٹ نہیں ہوتا.

ہم کچھ سی ایس ایس کے ساتھ اسے ٹھیک کر سکتے ہیں:

 media سکرین اور (واقفیت: پورٹریٹ) {
  Dial.Big # DiLvertical، .shadow.big # dialshadowvertical {
  دائیں: کیلک (50٪ - 75px)؛
  نیچے: 20px؛
  اوپر: آٹو؛
  }
  dial.big # dialhorizontal، .shadow.big # dialshadowhorizontal {
  بائیں: کیلک (50٪ - 75px)؛
  اوپر: 20px؛
  }
} 

18. کھلونا زیادہ حقیقت پسندانہ بنائیں

چلو ہمارے ٹیبلٹ ورژن پر واپس آتے ہیں. افسوس سے، کمپن API iOS پر دستیاب نہیں ہے، لہذا ہم ڈائلوں کو تبدیل کر دیا جاتا ہے جب ہم ہپیٹک کی رائے کو لاگو نہیں کر سکتے ہیں. اصل کھلونا میں، اگر آپ نے اسے دھکا دیا تو آپ اسکرین پر عارضی سیاہ فنگر پرنٹ کے نشان چھوڑ سکتے ہیں. اس خصوصیت کو نقل کرنے کے لئے ہم آلہ پر ایک ٹچ ایونٹ شامل کرسکتے ہیں.

ان سننے والوں کو مقرر کریں اس میں() اور افعال کو تلاش کریں جو وہ کہتے ہیں:

 اگر (قسم === 'سب') {
  cancory.addeventlistener ('Touchstart'، تقریب (ای) {
  e.prepressdefault ()؛
  drawfingerprintrprint (E.Layerx، E.Layery، Stval)؛
  })؛
  canorn.addeventlistener ('Touchend'، فنکشن (ای) {
  hidefingerprintrprint (E.Layerx، E.Layery)؛
  })؛
} 

19. کینوس کی ایک نقل محفوظ کریں

میں ڈرافینگر () طریقہ، ہم کچھ اور کرتے ہیں اس سے پہلے، ہم کینوس کی موجودہ ریاست کی ایک نقل چھپی ہوئی عنصر میں بچاتے ہیں جو ہم پرنٹ کو صاف کرتے وقت اپنے ڈرائنگ کو بحال کرنے کے لئے استعمال کرتے ہیں. یہ صرف پہلی رابطے پر ہوتا ہے، اور بعد میں کالوں پر نہیں ہے جو ہر 100mm پرنٹ کے سائز میں اضافہ کرتی ہے.

 فنکشن ڈراگنگر پرنٹ (XPOS، YPOS، Savecanvas) {
  / * جزوی تقریب، extra.js * /
  اگر (Savecanvas) {
  Hiddencanvas = دستاویز. createelment ('کینوس')؛
  var hiddencontext = hiddencanvas.getcontext ('2D')؛
  hiddencanvas.width = cance.width؛
  hiddencanvas.height = canse.height؛
  hiddencontext.drawimage (کینوس، 0، 0)؛
  }
} 

20. آف لائن آف لائن چلائیں

اب آپ کو گھر کی سکرین ایپ کے طور پر آپ کے ٹیبلٹ میں بچانے کے ذریعہ درخواست واقعی اسٹائل بنا سکتے ہیں. ہم فون کے لئے بھی ایسا نہیں کر سکیں گے، کیونکہ یہ سرور سے کنکشن کی ضرورت ہوتی ہے. میں /عوام نامزد کردہ فائل کا پتہ لگائیں Sketch.appcache. اور آپ کے IP ایڈریس کی طرف سے 'مقامی ہسٹسٹ' کے تمام مثالیں تبدیل کریں.

اب، مندرجہ ذیل پڑھنے کے لئے ایچ ٹی ایم ایل میں ترمیم کریں:

 & lt؛ ایچ ٹی ایم ایل Lang = "en" منفی = "sketch.appcache" & gt؛ 

21. درخواست کو محفوظ کریں

اب آپ کے ٹیبلٹ پر دوبارہ درخواست پر جائیں اور ہوم اسکرین کے اختیار میں شامل کریں. آپ کے ڈیسک ٹاپ پر ایک نیا آئکن ہونا چاہئے. یہ ایک بار کھولیں جبکہ ابھی تک اپنے مقامی ہاسسٹ سے منسلک ہونے سے منسلک کیا جا رہا ہے. کیش کا منفی ہم نے پہلے ہی قائم کیا ہے پس منظر میں آف لائن استعمال کے لئے تمام ضروری فائلوں کو ڈاؤن لوڈ کریں گے. وائی ​​فائی کو بند کریں اور دوبارہ اپلی کیشن کھولیں. آواز!

یہ مضمون اصل میں شائع ہوا ویب ڈیزائنر میگزین مسئلہ 263. اسے خریدیں یہاں .

مزید پڑھ:

• 15 ویب API آپ نے کبھی نہیں سنا ہے
• انٹرفیس متحرک ڈیزائن کرنے کے لئے ایک ابتدائی گائیڈ
• بہتر سی ایس ایس لکھنے کے لئے ایک گائیڈ