تەشنا تېخنىكا كۇلۇبى

ئويلاپ باقسام يازمىلارنى يۇمۇرىستىك قىلىپ يازمىسام بولمايدىغان چىراي. تېخنىكا دېگەن مۇز چىراي نەرسە، ئۇنىڭغا يۇمۇر ئارىلاشتۇرساق ساھىپجامال قىزچاققىلا ئوخشايدۇ، ئاندىن تېخىمۇ كۆپ كىشىلەر مەپتۇن بولىدۇ بەلكىم. ئىشقىلىپ ھامان بىركۈنى مەپتۇن بولمىغىنىڭلارنى بىر كۆرەي!!. ھو ھو ...

كومپىيۇتېر پىروگىراممىلىرىدا بەزى جەريانلارنى بىۋاستە كۆرگىلى بولىدۇ. مەسىلەن: ئالدىنقى يازمىلىرىمىزدا سىزغان چەمبەر، شارچە ۋە ئۇلارنىڭ رەڭگى، ئورنى، چوڭ – كىچىكلىكى قاتارلىقلارنى سىيلاپ باقساق بىلگىلى بولىدۇ؛ يەنە بەزى نەرسىلەرنى ئەسلا كۆرگىلى ھەم سىيلىغىلى ياكى پۇرىغىلى بولمايدۇ. مەسىلەن: ئالدىنقى يازمىلىرىمىزدا ئىشلەتكەن beginPath() ۋە Stroke() arc()قاتارلىق ئۇسسۇللارغا بىز ھېچنەدە ئېنىقلىما بەرمىدۇق، لېكىن ئۇلارنىڭ كۆتىگە تېپىپ مەلۇم ھادىسىلەرنى ئورۇنلاتقۇزدۇق. دېمەك بۇلار تور كۆرگۈ يادروسىغا قوشۇلۇپ، جەملىۋىتىلگەن ئالگورىفمالاردۇر. ئەمەلىيەتتە بىز تامامەن ئۆزىمىز ئايرىم يازغان ئالگورىفما ئارقىلىقمۇ ئوخشاشلا چەمبەر ۋە شارچىلەرنى سىزىپ چىقالايمىز.مەسىلەن تۆۋەندە چەمبەر سىزىدىغان ئالگورىفمادىن(算法) بىرىنى تۈزۈپ باقايلى: ئۈنۈم كۆرۈش (ئۈچبۇلۇڭ ۋە چەمبەرنىڭ سىزىلىش جەريانىنى سىلىشتۇرۇپ كۆرۈڭ)

دېمەك چەمبەرنىڭ ماتىماكىلىق فورمۇلاسى بويىچە ئاددىيلا ئالگورىفما تۈزۈپ، arc() ئۇسسۇلىنى ئىشلەتكەنگە ئوخشاش چەمبەر سىزىپ چىقتۇق. دېققەت قىلساق، سىزغان شەكىللەر "لاپ"لا قىلىپ كۆز ئالدىمىزدا نامايان بولىدۇ. مەيلى ئۆزىمىز يازغان ئالگورىفما ئارقىلىق سىزايلى ياكى beginpath() ئۇسسۇلى ئارقىلىق سىزايلى،ھىلىقىدەك شەكىللەرنىڭ سىزىلىش جەريانى بىزگە كۆرسىتىلمەيدۇ. مانا بۇ Javascript نىڭ قاتىل تەرىپى: كودلارنى شەكىل ياكى ئۈنۈم ئۇقۇمىغا ئايلاندۇرۇپ بېرىشنىلا بىلىدۇ، تەپسىلىي جەرياننى كۆرسىتىپ ئولتۇرمايدۇ(غوجائاڭ ئاقسا دەپ...). ھەم بۇ Javascript تا كۆپ لېنىيە(多线程) دېگەن ئۇقۇمنىڭ ئورنى يوق ئىكەنلىكىنى چۈشەندۈرىدۇ. لېكىن بىز ھەرخىل ھەرىكەت ئۈنۈملىرىنى چىقىرىش ئۈچۈن، بەزى شەكىللەرنىڭ سىزىلىش جەريانىنى كۆرەلىشىمىز كېرەك ئىدى - دە. بۇنىڭ ئۈچۈن ئۈچىنچى تەرەپ ئاچقان بەزى تەييار js ئامبارلىرىغا مۇراجەت قىلىمىز. مەسىلەن بۇندىن كېيىنكى يازمىمىزدا بىز Jsces ئامبىرىنى ئىشلىتىمىز! كودلار ئارىسىدا Jscex.compile دېگەنلەرنى ئۇچىراتسىڭىزلا موشۇ ئامبارنى ئىشلەتتۇق دەپ چۈشەنسىڭىز بولىدۇ.

Jscex نېمە ئۇ؟ ئۇ بولسا JavaScript Computation Expression نىڭ قىسقارتىلمىسى. JavaScript تىلى ئۈچۈن monadic كېڭەيتىلمە رولىنى ئوينايدۇ. Jscex پۈتۈنلەي JavaScript ئارقىلىق يېزىلغان بولۇپ، بارلىق تورگۈلەردە نورمال ئىجرا بولالايدۇ! تامام~~~

ئەمدى يىرىم پەشتاق يۇقىرىغا چىقايلى! تاق قەدەم(异步) سىزىش ئۇسسۇلى ئارقىلىق ھەرخىل ھەرىكاتچان جەريان ئۈنۈملىرىگە ئىرىشەلەيمىز. مەسىلەن ماۋۇنىڭدەك: ئۈنۈم كۆرۈش

تۆۋەندە بېسسېل سىزىقچىلىرى (贝塞尔曲线) .ئارقىلىق. ھىلىقى نېمىتى؟ قۇش چاڭگىسى شەكلىگە ئوخشاش بىرنەرسە سىزىپ باقايلى(يۇقىرىدا كۆرگەن ئۈنۈمدىكىدەك). قانداق سىزىمىز؟؟ ئېللىپىس سىزىپ، مەلۇم بىر نوقتىنى مەركەز قىلىپ، بۇغداي تاسقىغان غەلۋىردەك قىمىرلاتقىلى تۇرساقلا،قۇش چاڭگىسىغا ئوخشىمىسىمۇ ئولىمپىك چاڭگىسىغا ئوخشاش شەكىل ھاسىل بولىدۇ. لېكىن HTML5 تە ئىللىپىس سىزىدىغان تەييار ئۇسسۇل يوق. شۇڭلاشقا خۇددى تۆۋەندىكىدەك بىر فۇنكىسىيەنى ئۆزىمىز جايلاشقا توغرا كېلىدۇ:

function drawEllipse(x, y, w, h) { 
//code here please..
}

يۇقىرىقى كودتا: x,y بولسا ئېللىپسنىڭ سول ئۈستى تەرەپ ئورۇن كوردىناتى(مەركىزى ئەمەس)؛ w,h بولسا ئۇزۇن قىسقا ئوقىنى كۆرسىتىدۇ.
بۇ فۇنكىسىيەگە تۇتۇش قىلىشتىن ئاۋۋال تەبئىكى بىر نەچچە خىل ھەل قىلىش چارىسىنى ئويلىشىمىز مۇمكىن:
1. ئېللىپسنىڭ دىكارت كوردىنات تەڭلىمىسى بويىچە سىزىش.
2. ئىللىپىسنىڭ قۇتۇپ كوئوردېنات تەڭلىمىسى بويىچە سىزىش.
3. تۆت دانە بېسسىل سىزىقچىسى ئارقىلىق سىزىش
1 - ۋە 2 - خىل ئۇسسۇللاردا چىكىتنى ئاساس قىلىمىز. يەنى، سامادىكى يۇلتۇزلاردەك چىمىر – چىمىر چىكىتلەرنى سىزىپ، تۇتاشتۇرۇش ئارقىلىق سىزىق ھالىتىدىكى ئېللىپسقا ئايلاندۇرىمىز. بىراق، بۇنىڭلىق بىلەن چەكسىز قىتىم ھىسابلاش ئېلىپ بېرىشقا ۋە CanvasRenderingContext2D نىڭ API سىنى بەك تولا تەكرار ئىشلىتىشكە توغرا كېلىدۇ. نەتىجىدە تور كۆرگۈ قېتىۋالىدىغان ۋەقەلەر يۈز بېرىپ قالىدۇ.
خوش، مەركىزى پويىنتقا قايتىپ كەلسەك، 3 – خىل ئۇسسۇل بويىچە ئېللىپىس سىزىمىز. قىزىققۇچىلارنى توردىن贝塞尔曲线 دەپ ئىزدەپ، تەپسىلىي چۈشۈنۈپ چىقىشىقا چىللايمىز. قىزىقمىغۇچىلارنى بىراقلا تۆۋەندىكى كودلارغا كۆز چىمىرلىتىشقا بۇيرۇيمىز!

function drawEllipse(x, y, w, h) {
  //k:bessil tenglimisidiki bir turaqliq san
  // ox,oy: gorzintal/vertikal kontrol noqtisining surulush qimmiti
  // xe,ye: ellipce sirti kordinat qimmiti
  // xm,ym: ellipce merkizi kordinat qimmiti
       var k = 0.5522848;
       var ox = (w / 2) * k;
       var oy = (h / 2) * k;
       var xe = x + w;
       var ye = y + h;
       var xm = x + w / 2;
       var 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.stroke();
       ctx.strokeStyle = randomColor();
        }

يەنى يۇقىرىقىدەك تۆت دانە بېسسىل سىزىقچىسى ئارقىلىق ئېللىپىس سىزىش چۈشىمىز رىئاللىققا ئايلاندى. پارامىتىرلارغا مۇۋاپىق ئىزاھاتلار بېرىلدى. سىزىقچىلارنىڭ رەڭگىگە تۆۋەندە يازىدىغان ئىختىيارىي رەڭ ھاسىللاش فۇنكىسىيەسى randColor() توغۇرلارندى.
لېكىن يەنە بىر مەسىلە: ئېللىپىسنى بىر نوقتىغا سىزىۋەرگەن بىلەن ئۈستىمۇ – ئۈستى چۈشىۋىرىدۇ. شۇڭا مۇۋاپىق ھالدا ئايلاندۇرۇپ سىزىش ئارقىلىق ئىرماش – چىرماش چاڭگا ئۈنۈمىنى چىقىرىش مۇمكىن. دەماللىققا CanvasRenderingContext2D.rotate() ئۇسسۇلىنى ئويلاپ قالىمىز. بىراق بۇنى ئىشلەتكەندە canvas نىڭ ئۈستى سول تەرىپى (0,0) نوقتىنى مەركەز قىلىپ چۆرىيدۇ، ھىلىقى لەغمەن سۈزىدىغان چويلىدەكلا... شۇڭلاشقا ئاۋۋال CanvasRenderingContext2D.translate() ئارقىلىق (0,0) نوقتىنى ئېللىپىس مەركىزىگە توغۇرلاپ ئاندىن چۆرىيمىز، ئۇقۇمى تۆۋەندىكى رەسىمدىكىدەك:

يەنى، پەقەت drawEllipce فۇنكىسىيەسى ئىچىگە تۆۋەندىكى نەچچە قۇر كودنى قوشۇپ قويساقلا بولىدۇ.

// ellipisni chorush
       ctx.translate(x + 70, y + 100);
        px = -70;
       py = -100;
       ctx.rotate(10 * Math.PI * 2 / 360);

تامام، شۇنىڭلىق بىلەن ئاساسى ئىش پۈتتى دەيمىز. تولۇق كودلىرىنى Github   بېتىمدىن كۆرۈڭلار ۋە چۈشۈرىۋىلىڭلار: ئەسلى كود