没做之前还以为只是拖拽功能，其实细节还是蛮多的，其中也遇到很多问题，不过都已经解决了,&支持IE系列，FIREFOX，chrome浏览器，其它没测,&IE6下可能有点卡。欢迎大家寻找BUG~~DEMO演示：点击试玩&IFREAME演示:&就不解释了，我源代码里面的注释写得很清楚，有兴趣的可以看一下源代码，如下：&!DOCTYPE html&&html&&head&
&meta charset="utf-8"&
&title&JS&/title&
&meta name="keywords" content="拼图游戏"/&
&meta name="description" content="拼图游戏"/&
&style type="text/css"&
text-align:
font-size: 14
font-weight:
text-align:
#thumb li {
list-style:
margin-left: 5
#gameCanvas {
padding: 0;
#gameCanvas li {
list-style:
z-index: 999;
background: #
width: 133
height: 133
background-image: url('images/play.png');
z-index: 1000;
margin-left: -66
left: 50%;
margin-top: -66
#button:hover {
background-position: -133px 0;
#textTip {
font-size: 25
font-weight:
color: #000;
text-align:
top: -75%;
z-index: 1000;
margin-left: 5
margin-right: 5
font-size: 20
text-align:
&/style&&/head&&body&&div id="vvg"&
&p id="desTip"&通过四个关卡后可以自定义图片&&&&现在是第&span id="step"&1&/span&关&/p&
&p id="imgDiy"&填入图片地址：&input type="text" id="imgUrl"&&input id="startDiy" type="button" value="开始"&&/p&
&div id="vvgBox"&
&ul id="gameCanvas"&&/ul&
&/div&&/div&&script type="text/javascript"&/*
博客地址：/NNUF/*//*快捷函数*/function getId(id) {
return typeof id === "string" ? document.getElementById(id) : id}function setOpacity(node, level) {
if (document.all) {
node.style.filter = 'alpha(opacity=' + level + ')';
node.style.opacity = level / 100;
}}//设置第几关var vvg = {};vvg.step = 1;/* 游戏 内容代码 */function makeGame(url) {
var imgArray = [], imgArray_bak = [],
dragging = null, draggingL, draggingT, dear, dearL, dearT, top, left, effectEnd,
posArray = [], posArray_bak = [], canvas = getId('gameCanvas'), vvgBox = getId('vvgBox'), successT
// posx,posy 为鼠标相对于拖动对象的左上角距离， sLeft sTop 为拖动对象的初始位置
var posx, posy, zindex = 0, isMouseM
var imgWidth, imgH
var img = new Image();
// 图片加载完毕
img.onload = function () {
//获取图片的尺寸
imgWidth = img.
imgHeight = img.
var myw = Math.floor(imgWidth / 4),
myh = Math.floor(imgHeight / 4);
vvgBox.style.width = imgWidth + 'px';
vvgBox.style.height = imgHeight + 'px';
canvas.style.width = imgWidth + 'px';
canvas.style.height = imgHeight + 'px';
//清空gameCanvas
while (canvas.firstChild) {
canvas.removeChild(canvas.firstChild);
// 文档碎片
var oFragment = document.createDocumentFragment();
//循环生成方块状态的小图，以背景的形式展现，生成16格,并添加到数组
for (var i = 0; i & 16; i++) {
var li = document.createElement('li');
li.style.width = myw + 'px';
li.style.height = myh + 'px';
li.style.backgroundImage = 'url(' + url + ')';
// 计算坐标
if (i & 4) {//0,1,2,3 第一排
left = i *
} else if (i &= 4 && i & 8) {// 4,5,6,7 第二排
left = (i - 4) *
} else if (i &= 8 && i & 12) {// 8,9,10,11 第三排
left = (i - 8) *
} else if (i &= 12) { // 12，13，14，15 第四排
left = (i - 12) *
// 记录还未打乱次序的初始ID对应的每个id的正确位置，用于比较拼图是否完成
posArray.push([i, left, top]);
// 赋值背景backgroundPosition 与 位置
li.style.backgroundPosition = -left + 'px' + ' ' + (-top) + 'px';
// 赋值ID为i, 用于检查拼图的位置
// 对象是否在移动
li.isMove =
// 存储到数组imgArray中
imgArray.push(li);
li.style.left = left + 'px';
li.style.top = top + 'px';
// 事件绑定
li.onmousedown = function (event) {
event = event || window.
var target = event.target || event.srcE
isMouseMove =
dragging =
//记录拖动对象的初始位置
draggingL = parseInt(dragging.style.left);
draggingT = parseInt(dragging.style.top);
posx = event.clientX - canvas.offsetLeft - dragging.offsetL
posy = event.clientY - canvas.offsetTop - dragging.offsetT
// 在移动的图片就不绑定事件
if (!dragging.isMove) {
document.onmousemove = function (event) {
event = event || window.
var myleft = event.clientX - canvas.offsetLeft -
var mytop = event.clientY - canvas.offsetTop -
if (myleft & 0)myleft = 0;
if (mytop & 0)mytop = 0;
if (myleft & canvas.offsetWidth - dragging.offsetWidth)myleft = canvas.offsetWidth - dragging.offsetW
if (mytop & canvas.offsetHeight - dragging.offsetHeight)mytop = canvas.offsetHeight - dragging.offsetH
dragging.style.left = myleft + 'px';
dragging.style.top = mytop + 'px';
dragging.style.zIndex =
// 设置拖动的元素的不透明度
setOpacity(dragging, 80);
// 获取离拖动元素最近的元素
dear = checkMeet(dragging);
// 循环设置透明度为100....就是为了改变最近距离的透明度
for (var i = 0, n = imgArray_bak. i & i++) {
setOpacity(imgArray_bak[i], 100);
setOpacity(dear, 50);
dearL = parseInt(dear.style.left);
dearT = parseInt(dear.style.top);
isMouseMove =
document.onmouseup = function () {
document.onmousemove =
document.onmouseup =
// 只发生单击事件鼠标没有移动时不会设置透明度移动动画操作
if (isMouseMove === true) {
dear.style.zIndex =
setOpacity(dragging, 100);
setOpacity(dear, 100);
startMove(dear, draggingL, draggingT, 10);
startMove(dragging, dearL, dearT, 10);
isMouseMove =
dragging =
oFragment.appendChild(li);
canvas.appendChild(oFragment);
// 复制一份密码到posArray_bak,用于检查拼图是否完成(id对应正确的位置时，则拼图完成)
imgArray_bak = imgArray.concat(); //只包含对象
// posArray.push([i, left, top]);
posArray_bak = posArray.concat(); //包含对象id以及未打乱对象的位置属性
// 打乱数组imgArray
// 随机排列
function rank() {
while (imgArray.length & 0) {
// 在数组的长度中获取随机值下标
// 随机获取ID
var ranLi = imgArray.splice(random(0, imgArray.length), 1);
// 随机获取位置,并从原数组移除，返回移除项组成的数组
var ranCss = posArray.splice(random(0, posArray.length), 1);
// 赋值随机位置
startMove(ranLi[0], ranCss[0][1], ranCss[0][2], 10);
// 返回随机数函数
function random(from, to) {
return Math.floor(Math.random() * (to - from) + from);
// 检测与谁相交,判断对象的中心点的距离最近即相交
function checkMeet(obj) {
// 存储与每个对象的最小距离的数组
var disArray = [];
//循环图片对象列表，求距离并计入数组
for (var i = 0, n = imgArray_bak. i & i++) {
// 排除自身和正在移动的对象
if (imgArray_bak[i] != obj && !imgArray_bak[i].isMove) {
var item = getDistance(obj, imgArray_bak[i]);
//数组只传入一个值，后面的值与第一个值比较，如果比它小这替换这个值,剩下的就是最小的距离
if (disArray.length == 0) {
disArray.push([imgArray_bak[i], item]);
if (item - 0 & disArray[0][1] - 0) {
disArray.splice(0, 1, [imgArray_bak[i], item]);
// 返回距离最小的对象
return disArray[0][0];
// 求两对象中心两点之间的距离,传入对象,利用勾股定理求值
function getDistance(obj1, obj2) {
var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2);
var b = (obj1.offsetTop + obj1.offsetHeight / 2) - (obj2.offsetTop + obj2.offsetHeight / 2);
return Math.ceil(Math.sqrt(a * a + b * b));
// 检查拼图是否完成
function check() {
for (var j = 0, n = posArray_bak. j & j++) {
// posArray.push([i, left, top]);
var loopLi = getId(posArray_bak[j][0] + ''); //加空转换成字符串
var loopLiLeft = parseInt(loopLi.style.left);
var loopLiTop = parseInt(loopLi.style.top);
if (loopLiLeft != posArray_bak[j][1])
if (loopLiTop != posArray_bak[j][2])
// 设置移动
function startMove(obj, x2, y2, time) {
clearInterval(obj.timer);
if (!obj.timer) {
obj.timer = setInterval(function () {
move(obj, x2, y2);
// 移动效果
function move(obj, x2, y2) {
//判断对象是否移动
obj.isMove =
var x1 = parseInt(obj.style.left), y1 = parseInt(obj.style.top),
movex = (x2 & x1 ? Math.ceil : Math.floor)((x2 - x1) / 10),
movey = (y2 & y1 ? Math.ceil : Math.floor)((y2 - y1) / 10);
obj.style.left = (x1 + movex) + 'px';
obj.style.top = (y1 + movey) + 'px';
if (parseInt(obj.style.left) == x2 && parseInt(obj.style.top) == y2) {
clearInterval(obj.timer);
obj.isMove =
obj.timer =
// 通过拼图检查，并已经执行了拼图成功后的效果，避免成功动画也执行拼图成功，产生循环
if (!!check() && !effectEnd) {
successTimer && clearTimeout(successTimer);
successTimer = setTimeout(sucessEffect, 800);
// 拼图成功后效果
function sucessEffect() {
var num = 0, cT
function effect() {
var copy2 = imgArray_bak.concat();
var copy1 = posArray_bak.concat();
// 打乱数组imgArray
while (copy2.length & 0) {
// 随机获取ID
var ranLi = copy2.splice(random(0, copy2.length), 1);
// 随机获取位置,并从原数组移除，返回移除项组成的数组
var ranCss = copy1.splice(random(0, copy1.length), 1);
startMove(ranLi[0], ranCss[0][1], ranCss[0][2], 10);
if (num & 4) {
setTimeout(effect, 800);
setTimeout(back, 800);
function back() {
var copy1 = posArray_bak.concat();
while (copy1.length & 0) {
var ranCss = copy1.splice(random(0, copy1.length), 1);
startMove(getId(ranCss[0][0] + ''), ranCss[0][1], ranCss[0][2], 30);
// 特效过后弹出蒙板
cTimer && clearTimeout(cTimer);
cTimer = setTimeout(tipNextStep, 1000);
effectEnd =
function play() {
var mask = document.createElement('div');
mask.id = 'mask';
mask.style.width = imgWidth + 'px';
mask.style.height = imgHeight + 'px';
setOpacity(mask, 80);
var playBtn = document.createElement('div');
playBtn.id = 'button';
playBtn.onclick = function () {
canvas.removeChild(mask);
vvgBox.removeChild(playBtn);
// 打乱排序
canvas.appendChild(mask);
vvgBox.appendChild(playBtn);
// 下一张图按钮
function tipNextStep() {
vvg.step += 1;
var mask = document.createElement('div');
mask.id = 'mask';
mask.style.width = imgWidth + 'px';
mask.style.height = imgHeight + 'px';
setOpacity(mask, 80);
var playBtn = document.createElement('div');
playBtn.id = 'button';
if (vvg.step & 5) {
playBtn.onclick = function () {
canvas.removeChild(mask);
vvgBox.removeChild(playBtn);
vvgBox.removeChild(textTip);
var step = getId('step');
step.innerHTML = vvg.
makeGame('images/0' + vvg.step + '.jpg');
playBtn.onclick = function () {
while (canvas.firstChild) {
canvas.removeChild(canvas.firstChild);
var btn = getId('button');
btn.parentNode.removeChild(btn);
var tip = getId('textTip');
tip.innerHTML = '';
var desTip = getId('desTip');
desTip.innerHTML = '现在你可以自定义图片了，请在下面的文本框中输入图片的地址：';
var imgDiy = getId('imgDiy');
var startDiy = getId('startDiy');
var imgUrl = getId('imgUrl');
imgDiy.style.display = 'block';
startDiy.onclick = function () {
if (imgUrl.value == '') {
alert('请填入图片地址');
makeGame(imgUrl.value);
var textTip = document.createElement('div');
textTip.id = 'textTip';
textTip.innerHTML = "点击开始第" + vvg.step + "关";
canvas.appendChild(mask);
vvgBox.appendChild(playBtn);
vvgBox.appendChild(textTip);
}}// 默认播放第一关makeGame('images/01.jpg');&/script&&/body&&/html&&&
JavaScript做的拼图游戏_喜鹊_新浪博客 &script type=&text/javascript&& var movex = 600,movey = 440; //空白... //游戏结束显示动画效果图片 如果胜利则图片不能再移动 if(iswin()){ game...JavaScript页拼图游戏_星火视频计算机教程[导读] JavaSCript页拼图游戏,貌似功能很强大,可以自动打乱图片,选择不同的图片,设置几行几列,操作也比较方便,学习JS游戏的朋友可以参考哦。… [我来说两句]...如何使用javascript制作拼图游戏? - 已解决 - 搜搜问问1个回答&-&最新回答:&日现在我需要使用JavaScript制作一个页拼图游戏。请会的人能给我点思路和代码吗?。。谢谢 补充: 那怎么改变它的值呢?。。也就是说。我现在点了一个图片要放到...&-&javascript拼图游戏_ses2010的空间_百度空间图文 &script type=&text/javascript&& var mapBlock=3; //3 * 3 个单元格 ... &br&&font color=&red&&&b&拼图游戏&/b&&/font&&br& 开始时间:&input...里约大冒险手机拼图游戏(拼图可设置为手机壁纸)免费下载-心愿下载现在这款里约大冒险拼图游戏,可以让你在消磨时间的同时,还能不断的更新你的手机壁纸。一键设置将你喜欢的拼图图案设置成完美的手机壁纸。操作简单,34个关卡,四种难度...JavaScript原程序拼图游戏_百度文库&评分:4/5&3页JavaScript原程序拼图游戏 JavaScript源程序 脚本说明: 把如下代码加入&body&区域中 &style& .bigcell { background-color:#aa9966; border:4px solid #aa9966...-&如何使用JavaScript分割图片完成拼图游戏_百度知道2个回答 -提问时间:日cloudgamer这里有一个图片切割效果或许你可以参考它的原理做一个拼图游戏试试吧拼图游戏JavaScript制作 - 下载频道 - CSDN标签: 拼图游戏 ,javascript ,拼图,游戏 分享到: 新浪微博 腾讯微博收藏(1)... 用图片作了一个小小的拼图游戏, 没想到很受大家的喜爱, 很多人 想知道制作...pingtu 一个简单的拼图游戏,可以自定义的选择图片自认为注释写的...详细说明:一个简单的拼图游戏,可以自定义的选择图片自认为注释写的很详细-A simple puzzle game, you can customize the choice of pictures from that very ...图片三拼图游戏|自由模式|30块斜尖角形(非旋转)|在线拼图游戏 下面为游戏设置界面,希望大家好好利用,可以自由组合出好多形式。自定义游戏功能...如何把图片三在线拼图(自由模式|30块斜尖角形(非旋转))游戏放到自己的站上?...一款美女拼图游戏,养眼,可以自定义图片-远景-Windows7,Windows8,...19条回复&-&发帖时间:&日基于Javascript页拼图游戏答辩提纲 - 豆丁 Xxxx 1 基于Javascript 语言的程序开发—页拼图游戏 1 选题的目的与意义 为了真切地体会到拼图游戏在各种编译语言下的效果,这里选择JavaScript 语言进行页游戏的...vc++做拼图游戏,移动CStatic后图片不见了?初学者! - VC/MFCvc++做拼图游戏,移动CStatic后图片不见了?菜鸟!求助!vc++做拼图游戏,移动...JavaScript Apache 跨浏览器开发 IIS ASP HTML/CSS Delphi C++ Builder 高性能...如何使用画布、SVG 和多点触控来创建平铺拼图游戏所有触摸事件现在都可以作用于你的 JavaScript 代码,...(参见 SVG 坐标转换),我们创建并设置了两个自定义... 与高级SVG 动画中展示的游戏不同,拼图的框架相对...涂鸦拼图Doodle Fit评测:不一样的拼图游戏_手机软件教程_三联涂鸦拼图Doodle Fit评测:不一样的拼图游戏 三联 涂鸦拼图是以经典俄罗斯方块...其中包含了多种不同颜色风格的背景图片和音乐音效可以设置,避免重复和枯燥的玩法...【散分】又花了一晚上写了个javascript拼图游戏 - CSDN论坛 - ...43条回复&-&发帖时间:&日应用公园2.0:让APP开发变身趣味拼图游戏_天极图文并允许自定义编辑消息页面、绑定链接和设置定时发送,以实现精准化的推广...都可以通过应用公园轻松迈入移动互联的世界,捕捉App带来的无限乐趣和商机...用HTML5 Canvas和KicJS创建一个拼图游戏——第二步:拼图块12条回复&-&发帖时间:&日JAVA实现拼图游戏 - 技术分享 - 豆豆技术图文if (!isEvent) { // 设置背景色。 bg.setColor...拼图,完成后显示文字,拆分图片为分几列,分拆分图片... javascript(2356) vc(2276) linux(2096)...拼图游戏JAVA源码免费下载,JAVA游戏源码下载游戏的拼图, Cell类是继承的按钮类,并加上相应图形... Button start,preview,//定义开始,预览,设定...本文标签: Java 源码 游戏 下载 上一篇:JavaScript...【毕业论文】基于Android 益智拼图游戏设计.doc-毕业论文-在线...在游戏界面也设置了一个按钮,主要是给玩家提供“重新游戏”的机会。图片视图只要...北京:国防工业出版社,2007. [3] 美 威尔顿,麦可匹克.JavaScript入门经典 第3...用Flash制作个性化的简易拼图游戏_电脑维修中心画面上散落着N多块碎图片,透过这些碎图片我们可以...然后在屏幕的右边赫然写着几个大字——简易拼图游戏... javascript 数据库 XML与XHTML教程 PHP教程 CGI...JAVASCRIPT 精彩页特效实例精粹(1CD)-张涛,田瑜辉,张伟 编著-...图形图像、动画、多媒体与页开发 & 页设计 & JAVASCRIPT 精彩页特效实例... 实例162 设置页文本字号 实例163 综合的搜索引擎 实例164 自定义范围的随机...c5安卓版下载-机锋市场gfan Javascript, Java, JSP, Perl, PHP, Python, ...就可以进入游戏,并选择一个物体开始拼图,拼成功后,...软件也可以设置禁止某些软件联,有效防止流氓软件后台...统一下载站日当日更新软件【升级补丁】 诺顿络安全特警 2011无限试用补丁...JavaScript密集型Web任务,比如运行应用程序或是玩游戏...1920 x 1200的图形设定和支持宽屏显示器的画面效果,...软件供应--全新Delphi商业源码,只售500元。张图片的融合分离.zip 作框图程序.rar 使用动画图标...的自定义报表.zip 邮政编码查询.rar 部门设置小程序...包含全部源代码和JavaScript.rar MRP 完成大半了,...jquery
bang’s blog图文drop实现之前用FLASH做的拼图游戏,于是动手做了,...例如上传图片等,先尝试了使用javascript验证和发送饭...的动画函数,使用它们可以很简单地做出很酷的动画效果...如何使用javascript制作拼图游戏?_百度知道1个回答&-&提问时间:&日给你个思路吧 先用ps把一张大图分割成比如9种小图 命名是pic1 ... pic9然后用随机的办法把这九张图摆在页上 可利用&div order=&1& style=&...&-&GetImageGame java编写的拼图游戏,可以打开自选图 鼠标或键盘控制...关于JavaScript的书,打家可以看看。 [javapuzzlegame.rar] - 用java开发的拼图游戏,可由用户自己选择背景图片,然后对照完整图进行拼图 [cutimage.rar] - 用java...拼图游戏_拼图游戏大全_拼图小游戏大全_拼图小游戏 最新小游戏 [游戏数:1808个] 刘诗诗拼图刘诗诗拼图 魔仙拼拼... 图形构造图形构造 阿sue七彩回忆录2阿sue七彩回忆录...C#实现拼图游戏_百度文库&评分:4/5&8页 JavaScript原程序拼图游戏 3页 2财富值 拼图序列...3.根据玩家每次改变图片的位置判断是否拼图成功。 4...5就不能再和1交换 四、实现1.设定游戏模式 在玩...-&...使用自带的图片进行 ,这里为大家提供了苍老师的照 JavaScript ...详细说明:一个纯js实现的拼图游戏,前几关使用自带的图片进行拼图,这里为大家... ·纯javascript的表格控件,可以用纯j ·超华丽的背景图片轮播,可以设置多 ·...拼图游戏可以拼手机里面的照片给女朋友玩玩还是不错的 顶不顶无...14条回复&-&发帖时间:&日制作可选择本地图片的拼图游戏_百度文库&评分:4/5&4页制作可选择本地图片的拼图游戏陈瑞卿(闽西职业技术学院计算机系,福建龙岩364021) 摘要:文章主要介绍了在Rash中用FileR.eference类来实现选择硬盘上的图片,用du...-&...提供三种地图,十多种MP3作背景音乐。完全使用javascript+HTML...详细说明:拼图游戏,提供三种地图,十多种MP3作背景音乐。完全使用javascript+HTML编程。供学习和娱乐。禁止商业化。-Jigsaw puzzle, providing three kinds of maps, ...拼图_百度文库&评分:4/5&6页照做成拼图,把自己爱人或朋友的照片也可以做成拼图...而通过设定游戏时间和游戏的难度又可以提高游戏的趣味...如果熟悉javascript的人,看到ActionScript后一定...-&~~【SPB Puzzle拼图游戏】,spb的豪华游戏,支持手机图片拼图,...9条回复&-&发帖时间:&日JFC/Swing活学活用之创建自定义图像组件,Java教程,Java案例,Java实例
　　　　　本站短域名：珠江路.cn、zjlu.net
　　　　　　　　
　　　　　
　　　　　　　
您的位置： &&
&& JFC/Swing活学活用之创建自定义图像组件
JFC/Swing活学活用之创建自定义图像组件
　　下载本文源代码　　引言　　本文将讲述如何应用JFC/Swing内建的图像组件来创建完全自定义的基于图像的用户接口。　　大多数Swing应用程序是通过标准VM提供的，或者是客户提供的外观和感觉（L&F）来获取它们的外在展示。L&F是一个完整的体系架构，VM需要做很多内在的工作，并且它还不是完全自定义的。举个例子来说吧，在基于L&F的前提下，我们可以创建一个按钮，看起来有点像交通岗上的"红灯"，随之而来的在你的应用中所有的按钮就都有了这样的"相貌"。然而有时我们所真正需要的就是一个看起来与图像完全一样的按钮，就像Web上面基于图像的按钮一样。　　为了让大家更好的了解我们所要介绍的内容，先来看一下最终的显示效果，如下图所示：一个带面板（Panel）的窗格（Frame）包含了一个标签（Label），一个按钮（Button），一个复选框（Checkbox）。面板、标签和按钮完全由图像绘制，完全没有使用到标准的L&F。复选框是一个标准的Checkbox，但它将被设计成是透明的以搭配图像背景。
　　第一步 创建背景Panel　　要完成这"天堂"般的工程，首先我们要做的是创建一个图像背景。因为这样的组件可重用性（reusable）很高，所以我们创建了JPanel类的一个子类，叫做ImagePanel，参考下面的代码示例： 　　示例代码1：
package com.demo.import java.awt.*;import javax.swing.*;/*** 创建图像面板* @author xiazhi*/public class ImagePanel extends JPanel{　/**　* 图形对象　*/　private I　/**　* 构造函数　* 　* @param img 图像对象　*/　public ImagePanel(String img)　{　　this(new ImageIcon(img).getImage());　}　/**　* 构造函数　* 　* @param img 图像对象　*/　public ImagePanel(Image img)　{　　this.img =　　// 定义图像尺寸　　Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));　　setPreferredSize(size);　　setMinimumSize(size);　　setMaximumSize(size);　　setSize(size);　　// 定义布局方式为空　　setLayout(null);　}　/**　* 重画画布　*/　public void paintComponent(Graphics g)　{　　g.drawImage(img, 0, 0, null);　}}　　构造函数使用Image的实例作为参数，并将绘制的图像保存在变量img中以备以后使用。接着调用setSize()和setPreferredSize()方法，并以图像的尺寸作为参数。这样可以确保Panel的尺寸与图像的尺寸完全一致。接下来的操作非常重要，必须显示地指定Panel的preferred、maximum和minimum尺寸，因为Panel类的父类和子类可能不会使用绝对布局方式。　　小提示：我们都知道，Swing是使用布局管理器（Layout Manager）来控制组件的位置，绝对布局的意思就是不使用布局管理器来控制组件的位置。（可以通过setLayout(null)方法来指定采用绝对布局方式）　　既然这样，显示指定的尺寸和位置将会被使用（可以通过setSize()和setLocation()方法）。当使用指定的布局管理器时，preferred，minimum和maximum尺寸可能会被使用。为了适应上面所有的情况，我们只要简单的设置上面所提及的四个方法就可以了。　　现在，Panel已经设置了适当的尺寸，我们可以通过重载paintComponent()方法来绘制图像：
public void paintComponent(Graphics g){　g.drawImage(img, 0, 0, null);}　　小提示：在这里我们重载了paintComponent()方法，而不是paint()方法，这是很重要的一点，要不然子类将不会被重新绘制。　　现在来测试一下我们工作的成果，我们将自定义的Panel添加到一个Frame中，然后显示该Frame，参考下面的代码示例：　　示例代码2：
package com.demo.import javax.swing.*;/*** 测试图像Panel组件* @author xiazhi*/public class ImageTest1{　public static void main(String[] args)　{　　ImagePanel panel = new ImagePanel(createImageIcon("images/background.png").getImage());　　JFrame frame = new JFrame("JFC/Swing：创建以图像为主题的组件");　　frame.getContentPane().add(panel);　　frame.pack();　　frame.setVisible(true);　}　protected static ImageIcon createImageIcon(String path)　{　　java.net.URL imgURL = ImageTest1.class.getResource(path);　　if (imgURL != null)　　{　　　return new ImageIcon(imgURL);　　}　　else　　{　　　System.err.println("不能找到指定文件: " + path);　　　　　}　}}　　程序运行后，显示效果如下：
　　第二步 创建图像Label　　现在背景的绘制工作已经完成了。接下来要将重点转移到标签"Activate Reactor"的制作上了。这里仅仅是将一个静态的图像放置在背景的合适位置上。我们当然可以使用另外一个ImagePanel实例来实现这部分功能，但是由于"Activate Reactor"这个几个文字实际上仅仅是一个标签，所以我们创建了另外一个子类ImageLabel，参考下面的代码示例：　　示例代码3：
package com.demo.import javax.swing.*;/***图像标签* @author xiazhi*/public class ImageLabel extends JLabel{　/**　* 构造函数　*　* @param img 图像对象　*/　public ImageLabel(String img)　{　　this(new ImageIcon(img));　}　/**　* 构造函数　*　* @param icon 图像图标对象　*/　public ImageLabel(ImageIcon icon)　{　　//设置标签图标　　setIcon(icon);　　//设置标签图标和文本之间的间隔　　setIconTextGap(0);　　//设置边框　　setBorder(null);　　//设置文本　　setText(null);　　setSize(icon.getImage().getWidth(null), icon.getImage().getHeight(null));　}}　　与ImagePanel类似，我们需要将Label的尺寸与图像的尺寸相匹配。这里我们只需要调用setSize()方法即可，因为Label自己会处理其它的设置。接下来，将图标设置为我们指定的图像，这样Label自己会处理图像的绘制。通过设置文本间隔为0，以及设置边框为空，设置文本为空，将会去除图像的任何额外的空间，将会使Label与背景完美的啮合在一起。setOpaque(false)方法告诉Label不要自己绘制背景。如果用图像填充Label，那么问题不大，但如果图像中含有透明区域（大部分PNG类型的图像都会这个样子），那么在透明区域背景将会显示出来。　　现在来测试一下我们的成果吧！在上面测试的基础上添加了一个Label，参考下面的代码示例：　　示例代码4：
ImageLabel label = new ImageLabel(createImageIcon("images/reactor.png"));//定位Labellabel.setLocation(29, 37);//为Label增加提示信息label.setToolTipText("看到了吗？");//将Label添加到Panel中panel.add(label);　　程序运行后，显示效果如下所示：
　　第三步 创建图像Button　　接下来是创建定制的Button。由于Button具有翻转特性和状态特性，所以绘制Button需要一些技巧。我们再次创建了一个JButton类的子类，参考下面的代码示例：　　示例代码5：
package com.demo.import java.awt.*;import javax.swing.*;/*** 图像按钮* @author xiazhi*/public class ImageButton extends JButton{　/**　* 构造函数　*　* @param img 图像实例　*/　public ImageButton(String img)　{　　this(new ImageIcon(img));　}　/**　* 构造函数　*　* @param icon 图像图标　*/　public ImageButton(ImageIcon icon)　{　　//设置图标　　setIcon(icon);　　//设置空白间距　　setMargin(new Insets(0, 0, 0, 0));　　//设置文本与图标之间的间隔　　setIconTextGap(0);　　//指定是否绘制边框　　setBorderPainted(false);　　//设置边框　　setBorder(null);　　//设置文本　　setText(null);　　setSize(icon.getImage().getWidth(null), icon.getImage().getHeight(null));　}}　　这段代码几乎与前面定制显示的JLabel的代码完全一样。唯一的不同之处在于增加了setMargin()和setBorder()方法的调用。大多数L&F使用边框（Border）和边界（Margin）来指明Button是否已经被选取中。因为Label不能被选取择，所以没有上述方法。不管怎么样，我们只要将这两个属性关闭就可以了。 　　现在来测试一下我们的成果吧！在上面测试的基础上添加了一个Button，参考下面的代码示例：　　示例代码6：
final ImageButton button = new ImageButton(createImageIcon("images/button.png"));//定位Buttonbutton.setLocation(60,74);//将Button添加到Panel中panel.add(button);　　程序运行后，显示效果如下所示：
　　现在Button已经添加到Panel中，剩下的只要将翻转和其它状态属性添到到Button中就可以了。幸运的是，这些工作不需要我们在子类中添加任何新的代码。JButton已经提供了通过图像来表征翻转、按下、选择、失效、失效选择等属性。我们只需要使用通常的set方法来添加各种状态变量，参考下面的代码示例：
button.setPressedIcon(createImageIcon("images/button-down.png"));button.setRolloverIcon(createImageIcon("images/button-over.png"));button.setSelectedIcon(createImageIcon("images/button-sel.png"));button.setRolloverSelectedIcon(createImageIcon("images/button-sel-over.png"));button.setDisabledIcon(createImageIcon("images/button-disabled.png"));button.setDisabledSelectedIcon(createImageIcon("images/button-disabled-selected.png"));　　添加上述代码后，再次运行程序，显示效果如下所示：
未选择　　在这里我们使用了带有光圈的图像来表示Button被选中，将图像模糊化来表示Button被禁用，图像中间的矩形条用来表示Button被选中的状态，除了有颜色的改变外，还有发光的效果。　　为了完整的演示所有的状态，我们在Button的下部增加了一个标准的JCheckBox，通常情况下，它将会绘制一个灰色的背景（或者是带条纹的背景在Mac机上），我们调用setOpaque(false)方法来强制要求它不要绘制。当父类没有使用布局管理器时，调用checkbox.setSize(checkbox.getPreferredSize())方法是必须的，这样可以使checkbox获得合适的尺寸，就像本文示例中的情形：　　示例代码7：
final JCheckBox checkbox = new JCheckBox("Disable");checkbox.setLocation(70, 150);//强制要求checkbox不要绘制自己的背景checkbox.setOpaque(false);//设置checkbox的尺寸checkbox.setSize(checkbox.getPreferredSize());//添加到Panel中panel.add(checkbox);//添加事件监听器checkbox.addActionListener(new ActionListener(){　public void actionPerformed(ActionEvent evt)　{　　button.setEnabled(!checkbox.isSelected());　}});　　到此示例程序已经完整了，程序运行后，整体的显示效果如下所示：
　　结束语　　至此，我们创建了完全定制的基于图像的组件，JFC/Swing有着庞大的结构，如何更好的去理解，理清组件之间的微妙关系，是学好Swing的关键。
数据库开发
产品库推荐
All Rights Reserved.
珠江路在线版权所有
　|　　|　　|　}