พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server
Moderator: mindphp
Thanapoom1514
PHP VIP Members
โพสต์: 4329 ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 » 26/01/2023 11:58 am
สอบถามครับโดยทำ responsive ของอิลิเมนต์ตำแหน่งนักเตะ ซึ่งงอิลิเมนต์ตำแหน่งนักเตะสามารถเลื่อนย้ายจัดตำแหน่งในรูปภาพพื้นหลังของสนามได้ครับ ซึ่งจะสอบถาม responsive ของอิลิเมนต์ตำแหน่งนักเตะยังไงหรอครับเนื่องจากหน้าจอที่ขนาดความกว้าง 800 px ขึ้นไป อิลิเมนต์ตำแหน่งนักเตะอยู่ตำแหน่งปกติครับ พอขนาด 800 px ลงไป ตัวอิลิเมนต์ตำแหน่งนักเตะตำแหน่งที่แสดงล้มออกมาครับ
JavaScript & Jquery Ajax & Node.JS-1.png (322.45 KiB) Viewed 1280 times
ซึ่งผมใช่วิธีบัญญัติไตรยางศ์ครับ ซึ่งในตัวคำนวณมันถูกต้องหรือเปล่าครับ
โค้ด: เลือกทั้งหมด
$(window).on('resize', function() {
var width_drag = $('#drag-container').width();
var divWidth_x = (width_drag * 50) / 1000;
var divWidth_y = (width_drag * 20) / 1000;
$.each($('.draggable'), function() {
let s = $(this).css('transform');
console.log(s)
let values = s.match(/matrix\(([^\)]+)\)/)[1].split(', ');
let X = (parseFloat(values[4]) * divWidth_x) / width_drag;
let Y = (parseFloat(values[5]) * divWidth_y) / width_drag;
console.log('x :'+X+' px y :'+Y+" px 700");
$(this).css({"transform": "translate("+ X +"px, "+ Y +"px)"});
});
});
tsukasaz
PHP VIP Members
โพสต์: 22120 ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
โพสต์ที่ยังไม่ได้อ่าน
โดย tsukasaz » 26/01/2023 12:04 pm
ทำไมในหน้าจอมือถือหน้าเว็บไซต์ถึงไม่แสดงเต็มครับ เหมือนจะมีขอบขาวด้านขวาเยอะ ตัวภาพสนามเหมือนโดนบีบไปทางซ้ายอยู่นะครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995 )
mindphp
ผู้ดูแลระบบ MindPHP
โพสต์: 41387 ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย mindphp » 26/01/2023 12:05 pm
คำนวณ สัดส่วนของหน้าจอที่ใช้เทียบกับ หน้าจอที่ไม่เพี้ยนเพื่อใช้เป็นฐานในการคิด ทั้งพิกัด x,y
เมื่อได้สัดส่วนแล้วคูณกับตำแหน่งปัจจุบันของตัวฐาน
จะได้พิกัดในหน้าจอใหม่
Thanapoom1514
PHP VIP Members
โพสต์: 4329 ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 » 26/01/2023 12:29 pm
tsukasaz เขียน: ↑ 26/01/2023 12:04 pm
ทำไมในหน้าจอมือถือหน้าเว็บไซต์ถึงไม่แสดงเต็มครับ เหมือนจะมีขอบขาวด้านขวาเยอะ ตัวภาพสนามเหมือนโดนบีบไปทางซ้ายอยู่นะครับ
ตัวของตารางผู้ใช้งานล่าสุดดันมาครับ ผมปรับแล้วครับในส่วนนี้
JavaScript & Jquery Ajax & Node.JS-1.png (30.77 KiB) Viewed 1257 times
Thanapoom1514
PHP VIP Members
โพสต์: 4329 ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 » 27/01/2023 9:40 am
mindphp เขียน: ↑ 26/01/2023 12:05 pm
คำนวณ สัดส่วนของหน้าจอที่ใช้เทียบกับ หน้าจอที่ไม่เพี้ยนเพื่อใช้เป็นฐานในการคิด ทั้งพิกัด x,y
เมื่อได้สัดส่วนแล้วคูณกับตำแหน่งปัจจุบันของตัวฐาน
จะได้พิกัดในหน้าจอใหม่
ผมลองคำนวณตามคำแนะนำ ซึ่งที่ผมเข้าใจคือคำนวณสัดส่วนของพื้นหลังสนามกับขนาดจอใช่ไหมครับ แล้วมาคูณตำแหน่งค่า x กับ y ของตำแหน่งของผู้เล่นใช่ไหม
โค้ด: เลือกทั้งหมด
var Width_background = $('.drag-container').width();
var Height_background = $('.drag-container').height();
var proportion_background = Width_background / Height_background;
console.log(proportion_background);
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var proportion = screenWidth / screenHeight;
console.log(proportion);
let result = proportion_background * proportion ;
console.log(result);
$.each($('.draggable'), function() {
let s = $(this).css('transform');
console.log(s)
let values = s.match(/matrix\(([^\)]+)\)/)[1].split(', ');
let X = (parseFloat(values[4]) * result);
let Y = (parseFloat(values[5]) * result);
// console.log('x :'+ X +' px y :'+ Y +" px");
$(this).css({"transform": "translate("+ X +"px, "+ Y +"px)"});
});
ผลที่ได้เป็นแบบนี้ครับ
JavaScript & Jquery Ajax & Node.JS-1.png (206.95 KiB) Viewed 1213 times
mindphp
ผู้ดูแลระบบ MindPHP
โพสต์: 41387 ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย mindphp » 27/01/2023 1:27 pm
เทียบสัดส่วนของ หน้าจอที่ใช้ได้ปกติ กับ หน้าจอขนาดใหม่ ก่อนครับ
แล้วเอาสัดส่วนนัดไปใช้ต่อกับตำแหน่ง กิกัด
เช่น สัดส่วนหน้าจอเดิม กับ หน้าจอใหม่
800x600
กับหน้าจอใหม่
400x200
สัดส่วน คือ
2:1x3:1
2:1 คือแนวแกน y
3:1 คือแนวแกน x
(การนับแกนนับ บนสุดซ้ายสุดที่ 0,0 จะต่างกับคณิตศาตร์ที่เคยเรียนมาที่เป็นล่างสุดซ้ายสุดเป็น 0,0)
พอได้สัดส่วนแล้ว เอาไปหาร ออกจาก กัดเดิม เช่นพิกันเดิม อยู่ที่ 222,30 px พิกัดใหม่คือ 222/2, 30/3 ===> 111,10 px
Thanapoom1514
PHP VIP Members
โพสต์: 4329 ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 » 27/01/2023 3:11 pm
ได้แล้วครับในส่วนคำนวณสัดส่วนครับ
โค้ด: เลือกทั้งหมด
let Width_background = $('.drag-container').width();
let Height_background = $('.drag-container').height();
const width = 718.4 ;
const height = 750 ;
let widthProportion = Width_background / width;
let heightProportion = Height_background / height;
$.each($('.draggable'), function() {
let s = $(this).css('transform');
console.log(s)
let values = s.match(/matrix\(([^\)]+)\)/)[1].split(', ');
let X = (parseFloat(values[4]) * widthProportion);
let Y = (parseFloat(values[5]) * heightProportion);
// console.log('x :'+ X +' px y :'+ Y +" px");
$(this).css({"transform": "translate("+ X +"px, "+ Y +"px)"});
});
ผลที่ได้
JavaScript & Jquery Ajax & Node.JS-1.png (173.9 KiB) Viewed 1193 times
JavaScript & Jquery Ajax & Node.JS-1.png (216.05 KiB) Viewed 1193 times
mindphp
ผู้ดูแลระบบ MindPHP
โพสต์: 41387 ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย mindphp » 27/01/2023 3:27 pm
ถูกทางแล้ว
ลองทดสอบกับจอ ที่ใหญ่ขึ้นด้วยนะครับ
2 ตอบกลับ
2306 แสดง
โพสต์ล่าสุด โดย Before Dong
22/07/2017 6:53 pm
2 ตอบกลับ
5541 แสดง
โพสต์ล่าสุด โดย jay_limm
18/06/2014 2:48 pm
1 ตอบกลับ
875 แสดง
โพสต์ล่าสุด โดย mindphp
24/01/2023 1:15 pm
4 ตอบกลับ
3635 แสดง
โพสต์ล่าสุด โดย Keyboardslo
27/01/2016 3:59 pm
0 ตอบกลับ
3133 แสดง
โพสต์ล่าสุด โดย abdkode
27/03/2019 2:26 pm
1 ตอบกลับ
1321 แสดง
โพสต์ล่าสุด โดย tsukasaz
11/09/2017 11:33 am
2 ตอบกลับ
1331 แสดง
โพสต์ล่าสุด โดย IreneRhodes
07/08/2023 12:33 am
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 15