kineticjs学习之拼图显示图片

hztzhn0528

于 2014-11-27 15:29:29 发布

阅读量353

点赞数

分类专栏： Web前端文章标签： javascript 框架 html5 动画

本文链接：https://blog.csdn.net/hztzhn0528/article/details/41546909

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

KineticJS是一款开源的HTML5 Canvas JavaScript框架，能为桌面和移动应用提供高性能动画，并具有转场效果、节点嵌套、分层、滤镜、缓存以及事件处理等更多功能。即使你的应用包含了成千上万的图形，也可以为你所绘制的东西添加事件监听器.

kineticjs的主页:http://kineticjs.com/

使用kineticjs实现拼图的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
body{
margin:0px;
overflow:hidden;
}
#container{
background-color: #888888;
}
</style>
<script src="http://cdn.bootcss.com/kineticjs/5.0.6/kinetic.js"></script>
<script type="text/javascript">

var leftPiecesArray = new Array();
var rightPiecesArray = new Array();

function calcPosition(leftPieces,rightPieces,width,height)
{
//left calc
for( i = 0; i < leftPieces; i++)
{
var piece = new Object;
   piece.x = 0;
piece.y = i*height/leftPieces;
piece.width = width/2;
piece.height = height/leftPieces;
leftPiecesArray.push(piece);
   }
   //right calc
for( i = 0; i < rightPieces; i++)
{
rightPiecesArray[i] = {x:width/2,y:i*height/rightPieces,width:width/2,height:height/rightPieces};
}

}

function drawImage(imageObj) {
var piecesArray=new Array();
var horizontalPieces = 2;
var verticalPieces = 3;
var imageWidth = imageObj.width;
var imageHeight = imageObj.height;
var pieceWidth = Math.round(imageWidth/horizontalPieces);
var pieceHeight = Math.round(imageHeight/verticalPieces);
var stage = new Kinetic.Stage({
container: "container",
width: window.innerWidth,
height: window.innerHeight
});

var layer = new Kinetic.Layer();
var leftPieces = 3;//左边3行
var rightPieces = 2;//右边2行

calcPosition(leftPieces,rightPieces,window.innerWidth,window.innerHeight);


//left
for( i = 0; i < leftPieces ; i++)
{

var layer = new Kinetic.Layer();
piecesArray[i] = new Kinetic.Image({
   image: imageObj,
   x:leftPiecesArray[i].x,
y:leftPiecesArray[i].y,
width:leftPiecesArray[i].width,
height:leftPiecesArray[i].height,
draggable: true,
stroke : "black", //矩形边缘线的颜色
strokeWidth : 4 //矩形边缘线的宽度
});

layer.add(piecesArray[i]);
stage.add(layer);
}

piecesArray = [];
//right
for( i = 0; i < rightPieces ; i++)
{
var layer = new Kinetic.Layer();
piecesArray[i] = new Kinetic.Image({
   image: imageObj,
   x:rightPiecesArray[i].x,
y:rightPiecesArray[i].y,
width:rightPiecesArray[i].width,
height:rightPiecesArray[i].height,
draggable: true,
stroke : "black", //矩形边缘线的颜色
strokeWidth : 4 //矩形边缘线的宽度
});

layer.add(piecesArray[i]);
stage.add(layer);
}

//stage.add(layer);
}

function jigsaw(){
var imageObj = new Image();
imageObj.src = "http://pic.159.com/desk/user/2012/7/8/Jiker201260193321546.jpg";
imageObj.onload = function(){
drawImage(this);
}

}
</script>
</head>
<title>test</title>

<body οnlοad="jigsaw()">
<div id="container"></div>
<button onclick = "jigsaw()">draw</button>
</body>

</html>

hztzhn0528

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kineticjs学习之拼图显示图片

KineticJS是一款开源的HTML5 Canvas JavaScript框架，能为桌面和移动应用提供高性能动画，并具有转场效果、节点嵌套、分层、滤镜、缓存以及事件处理等更多功能。即使你的应用包含了成千上万的图形，也可以为你所绘制的东西添加事件监听器.
复制链接

扫一扫