ผมจะสร้างสี่เหลี่ยมเป็นเเถว เเล้วพอกดตัวเลขให้ไปอยู่ในสี่เหลี่ยม ได้ยังไงครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ผมจะสร้างสี่เหลี่ยมเป็นเเถว เเล้วพอกดตัวเลขให้ไปอยู่ในสี่เหลี่ยม ได้ยังไงครับ

ผมจะสร้างสี่เหลี่ยมเป็นเเถว เเล้วพอกดตัวเลขให้ไปอยู่ในสี่เหลี่ยม ได้ยังไงครับ
ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้  พอกดเลขด้านล่างให้ขึ้นในสี่เหลี่ยมด้านบน เเนะนำหน่อยครับ php







Golff Sinlapachai 110.78.176.xxx 17-09-2019 19:23:49

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานด้วย Facebook คลิก )
 ความคิดเห็นที่ 1
ใช่เเบบนี้รึป่าวครับ ถ้าใช่ต้องใช้ตัวไหนครับ

1.
https://www.w3schools.com/css/css3_flexbox.asp?fbclid=IwAR2cye8tOkE_A7ShMnmku_iTKzbVoG7Ev-iNupXmMrJShqajb18ypBaxhlE


2.

https://www.w3schools.com/graphics/canvas_drawing.asp


Golff Sinlapachai 116.58.243.xxx 18-09-2019 08:34
 ความคิดเห็นที่ 2
  น่าจะแนวๆ นั้น หรือไม่ก็ประยุกต์พวก JavaScript ร่วมกับ HTML5 และก็ Canvas


Ninenik 14.207.44.xxx 18-09-2019
 ความคิดเห็นที่ 3
พอจะมีตัวอย่างไหมครับ


Golff Sinlapachai 110.78.176.xxx 18-09-2019 10:16
 ความคิดเห็นที่ 4
ศึกษาเกี่ยวกับ canvas API เพิ่มเติมได้ที่ 
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

โค้ดตัวอย่าง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="100"></canvas>
<br>
<button id="btn1" type="button">Add</button>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
  
  // ค่าเร่ิมต้น
  var n = 0;  // ลำดับรายการ
  var num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  var _x = 17;
  var _y = 34;
  // ตำแหน่ง x y ของวงกลม
  var _c_x = 25;
  var _c_y = 25;  
  
  // ทดสอบทำคำสั่งเพื่อมีการคลิก
  $("#btn1").click(function(){

    n++;  // เพิ่มลำดับรายการ
    num++; // เพิ่มตัวเลข
    _x = (50*n)-33; // สูตรตำแหน่ง จากพิกัด x ของข้อความ
    console.log(_x);    
    _c_x = 25*((2*n)-1); // สูตรตำแหน่ง จากพิกัด x ของวงกลม
    console.log(_c_x);    
    var ctx = canvas.getContext('2d');
    if(n!=1 && n%4==1){ // สร้างเงื่อนไข เมื่อขึ้นแถวใหม่
      n = 1;
      _c_x = 25;
      _c_y+=50;
      
      _x = 17;
      _y+=50;
    }
	
	// กำหนดรูปแบบการวาดวงกลม
    var circle = new Path2D();
    circle.arc(_c_x, _c_y, 18, 0, 2 * Math.PI);
	
	// วาดวงกลมลงใน canvas
    ctx.fillStyle = 'black';
    ctx.fill(circle);

	// กำหนดรูปแบบข้อความ
    ctx.font = '25px tahoma';
    ctx.fillStyle = '#FFFF8D';
	
	// เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx.fillText(num, _x, _y);     
    
  });
  
});  
// เมื่อหน้า page ให้วาดตารางลงใน canvas
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
 
	// กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(0, 0, 200, 100);
    
	// วาดสี่เหลี่ยมลงใน canvas
    ctx.fillStyle = '#E6E6E6';
    ctx.fill(rectangle);

	// วาดเส้นตาราง
    ctx.strokeStyle = '#D9D9D9';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, 50);
    ctx.lineTo(200, 50);
    ctx.moveTo(50, 0);
    ctx.lineTo(50, 100);
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 100);    
    ctx.stroke();   

  }
}
  
</script>
</body>
</html>


แนวทางการหาสมการ สำหรับโปรแกรมจุดพิกัด ตามค่า numeric sequence
สมมติเรารู้ว่า ตำแหน่งของ object หรือวส่วนที่เราต้องการแสดง จะอยู่ที่จุดใดได้บ้าง 
อย่างจุดกึ่งกลาง ตำแหน่งที่เราจะวางวงกลม คือ
25,25 75,25 125,25 และ 175,25 สำหรับแถวแรก เป็นพิกัด x,y ของวงกลมที่จะถูกวาดลงไปใน canvas
ให้เราเอาค่า x ที่เปลี่ยนแปลง ทำเป็น numeric sequence จะได้เป็น 25,75,125,175
นำค่าไปใส่ในหน้า Pattern Solver  เพื่อหาสมการ


เราจะได้สูตรมาใช้งาน




ตัวอย่าง DEMO

Ninenik 122.155.47.xxx 18-09-2019
 ความคิดเห็นที่ 5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="100"></canvas>
<br>
  <button class="btn1" type="button">1</button>
  <button class="btn1" type="button">2</button>  
  <button class="btn1" type="button">3</button><br/>
  <button class="btn1" type="button">4</button>
  <button class="btn1" type="button">5</button>
  <button class="btn1" type="button">6</button><br/>
  <button class="btn1" type="button">7</button>
  <button class="btn1" type="button">8</button>
  <button class="btn1" type="button">9</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
  
  // ค่าเร่ิมต้น
  var n = 0;  // ลำดับรายการ
  var num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  var _x = 17;
  var _y = 34;
  // ตำแหน่ง x y ของวงกลม
  var _c_x = 25;
  var _c_y = 25;  
  
  // ทดสอบทำคำสั่งเพื่อมีการคลิก
  $(".btn1").click(function(){

    n++;  // เพิ่มลำดับรายการ
    num = $(this).text(); // เพิ่มตัวเลขจากค่าที่ส่งมา
    _x = (50*n)-33; // สูตรตำแหน่ง จากพิกัด x ของข้อความ
    console.log(_x);    
    _c_x = 25*((2*n)-1); // สูตรตำแหน่ง จากพิกัด x ของวงกลม
    console.log(_c_x);    
    var ctx = canvas.getContext('2d');
    if(n!=1 && n%4==1){ // สร้างเงื่อนไข เมื่อขึ้นแถวใหม่
      n = 1;
      _c_x = 25;
      _c_y+=50;
      
      _x = 17;
      _y+=50;
    }
	
	// กำหนดรูปแบบการวาดวงกลม
    var circle = new Path2D();
    circle.arc(_c_x, _c_y, 18, 0, 2 * Math.PI);
	
	// วาดวงกลมลงใน canvas
    var colorCiclr = (n%2==0)?"#C91C1D":"black";
    ctx.fillStyle = colorCiclr;
    ctx.fill(circle);

	// กำหนดรูปแบบข้อความ
    ctx.font = '25px tahoma';
    ctx.fillStyle = '#FFFF8D';
	
	// เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx.fillText(num, _x, _y);     
    
  });
  
});  
// เมื่ดหน้า page ให้วดตาลรางลองใน canvas
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
 
	// กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(0, 0, 200, 100);
    
	// วาดสี่เหลี่ยมลงใน canvas
    ctx.fillStyle = '#E6E6E6';
    ctx.fill(rectangle);

	// วาดเส้นตาราง
    ctx.strokeStyle = '#D9D9D9';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, 50);
    ctx.lineTo(200, 50);
    ctx.moveTo(50, 0);
    ctx.lineTo(50, 100);
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 100);    
    ctx.stroke();   

  }
}
  
</script>
</body>
</html>


>>>  อัพเดท >>> 18-09-2019
------------------------------------------
เพิ่มปุ่ม reset

<button id="reset" type="button">&nbsp;&nbsp;RESET&nbsp;&nbsp;&nbsp;</button>


เรียกคำสั่ง reset

  $("#reset").click(function(){
    draw();
    // ค่าเร่ิมต้น
    n = 0;  // ลำดับรายการ
    num = 0; // ข้อความตัวเลข
    // ตำแหน่ง x y ของข้อความ
    _x = 17;
    _y = 34;
    // ตำแหน่ง x y ของวงกลม
    _c_x = 25;
    _c_y = 25;      
  });

ตัวอย่าง DEMO

Ninenik 122.155.47.xxx 18-09-2019
1 2 3 4 Next






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ