|
 |
| |
พอจะมีวิธีการทำภาพแต่ละส่วนมา ต่อๆ กันให้เป็นภาพเดียวโดยใช่พวก JavaScript css อะไรประมาณนี้ใหมครับ |
| |
 |
|
|
 |
 |
|
HTML Canvas ลองเสริชหาอ่านดูครับ ไม่ยาก
|
 |
 |
 |
 |
| Date :
2014-08-19 07:05:18 |
By :
Chaidhanan |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
Code (JavaScript)
<canvas id="MyCanvas" width="300" height="100"></canvas>
<script type="text/javascript">
CanvasRenderingContext2D.prototype.clear =
CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
if (preserveTransform) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); }
this.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (preserveTransform) { this.restore(); }
};
var img1_Loaded = false; var img1 = new Image();
var img2_Loaded = false; var img2 = new Image();
var img3_Loaded = false; var img3 = new Image();
img1.onload = function(){ img1_Loaded=true; }
img2.onload = function(){ img2_Loaded=true;}
img3.onload = function(){ img3_Loaded=true; }
function addImg1(src){ img1_Loaded = false; img1.src = src; }
function addImg2(src){ img2_Loaded = false; img2.src = src; }
function addImg3(src){ img3_Loaded = false; img3.src = src; }
function chkLoad(){
if( !img1_Loaded || !img2_Loaded || !img3_Loaded )
setTimeout( chkLoad, 100);
else {
var cv=document.getElementById("MyCanvas");
var ctx = cv.getContext('2d');
ctx.clear();
var x1=0, x2=100, x3=200;
var y1=0, y2=0, y3=0;
if( img1_Loaded) ctx.drawImage(img1, x1, y1);
if( img2_Loaded) ctx.drawImage(img2, x2, y2);
if( img3_Loaded) ctx.drawImage(img3, x3, y3);
}
}
</script>
ลองอ่านและศึกษาดูครับ ข้องใจตรงไหนก็โพสมาถามใหม่ครับ
|
ประวัติการแก้ไข
2014-08-19 10:53:36
| |
|
|
| |
| Date :
2014-08-19 10:50:13 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมแค่เขียนโค๊ดพอได้ครับ แต่ออกแบบหน้าตาด้าน graphic ไม่ได้เรื่องครับ
ตอนนี้ไม่มี ไอเดีย สำหรับสร้างงานครับ ต้องหลีกทางให้คนหนุ่มคนสาวครับ
ตอนนี้ทำได้แค่ ซัพพอร์ต เด็กรุ่นใหม่ใน ออฟฟิส ครับเป็นได้แค่ที่ปรึกษา
ว่างๆ ก็มา ทำประโยชน์ให้สังคมครับ
อีกอย่างที่ว่างมาซัพพอร์ดเพราะ เวปของบริษัทโดนระงับ ตามคำสั่งฯ 5555 ไม่พูดต่อล่ะเดี๋ยวซวย
|
| |
|
|
| |
| Date :
2014-08-19 13:10:57 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 8 เขียนโดย : tangsupap เมื่อวันที่ 2014-08-19 17:08:13
รายละเอียดของการตอบ ::
ตอนนี้ภาพนำภาพมาต่อกันได้แล้วครับ แต่ติดที่ว่าอยากให้กดที่ แล้วเปลี่ยน ส่วนๆ นั้นได้อะครับ เช่นถ้ากดรูปเสื้อ สีอื่น สีเสื้อที่ภาพหลักก็จะเปลี่ยนไปตามอะครับ
code ที่นำภาพมาต่อๆ กันครับ
<canvas id="myCanvas" width="600" height="500"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = {
a: 'http://www.itailor.com/Images/Models/Shirt/Mainbody/Front/Tri_Tab/7.png',
b: 'http://www.itailor.com/Images/Models/Shirt/Mainbody/ColorCombo/Sleeve/Long%20Sleeve/7.png',
c: 'http://www.itailor.com/Images/Models/Shirt/Mainbody/Collar/CL-4/7.png',
d: 'http://www.itailor.com/Images/Models/Shirt/Mainbody/button/1_button/Button/A8.png',
e: 'http://www.itailor.com/Images/Models/Shirt/Mainbody/ColorCombo/Cuff/Long%20Sleeve/front_cuff_out/7.png',
f: 'http://www.itailor.com/Images/Models/Shirt/Mainbody/Pocket/1%20pocket/PK-2/7.png',
g: 'http://www.itailor.com/Images/Models/Shirt/Mainbody/Front/Tri_Tab/2668-3.png'
};
loadImages(sources, function(images) {
context.drawImage(images.a, 120, 30, 340, 417);
context.drawImage(images.b, 120, 28, 340, 417);
context.drawImage(images.c, 120, 30, 340, 417);
context.drawImage(images.d, 120, 30, 340, 417);
context.drawImage(images.e, 120, 28, 340, 417);
context.drawImage(images.f, 120, 25, 340, 417);
});
</script>
|
| |
|
|
| |
| Date :
2014-08-19 18:30:53 |
By :
tangsupap |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (JavaScript)
<canvas id="MyCanvas" width="300" height="100"></canvas>
<script type="text/javascript">
CanvasRenderingContext2D.prototype.clear =
CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
if (preserveTransform) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); }
this.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (preserveTransform) { this.restore(); }
};
var img1_Loaded = false; var img1 = new Image();
var img2_Loaded = false; var img2 = new Image();
var img3_Loaded = false; var img3 = new Image();
img1.onload = function(){ img1_Loaded=true; }
img2.onload = function(){ img2_Loaded=true;}
img3.onload = function(){ img3_Loaded=true; }
function addImg1(src){ img1_Loaded = false; img1.src = src; }
function addImg2(src){ img2_Loaded = false; img2.src = src; }
function addImg3(src){ img3_Loaded = false; img3.src = src; }
function chkLoad( chk1, chk2, chk3){
if( ( chk1? !img1_Loaded : false) || (chk2? !img2_Loaded : false) || (chk3? !img3_Loaded : false) )
setTimeout( chkLoad, 100);
else {
var cv=document.getElementById("MyCanvas");
var ctx = cv.getContext('2d');
ctx.clear();
var x1=0, x2=100, x3=200;
var y1=0, y2=0, y3=0;
if( img1_Loaded) ctx.drawImage(img1, x1, y1);
if( img2_Loaded) ctx.drawImage(img2, x2, y2);
if( img3_Loaded) ctx.drawImage(img3, x3, y3);
}
}
// chkload( true, false, false) สั่งให้ตรวจสอบการโหลดสำเร็จ เฉพาะ img1 โหลดสำเร็จ ให้ โชว canvas ใหม่
</script>
<select onchange="addImg1(this.value); chkLoad( true, false, false)" >
<option value="redchirt.png" >เสื้อสีแดง</option>
<option value="bluechirt.png" >เสื้อสีน้ำเงิน</option>
<option value="yellowchirt.png" >เสื้อสีเหลือง</option>
<option value="greenchirt.png" >เสื้อสีขียว</option>
</select>
ปรับโค๊ดนิดหน่อย สำหรับสามารถเลือก รุปได้ ตัวอย่างเฉพาะ img1 ส่วนที่เหลือก็ลองทำเอานะครับ
|
| |
|
|
| |
| Date :
2014-08-19 18:52:47 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
