您的位置：首页 > 其它

Canvas的应用，图片的移动、旋转、缩放

2017-01-13 16:00 375 查看

Canvas的应用，图片的移动、旋转、缩放

借助Canvas类库（zrender）实现对图片的拖拽，旋转，缩放

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zrender</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-2.1.1/jquery.min.js"></script>
<script src="zrender/asset/js/esl/esl.js"></script>
<style type="text/css">
#mainCanvas{
margin: 0 auto;
height: 800px;
width: 800px;
min-height: 800px;
min-width: 800px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-sm-9 col-sm-offset-12 col-md-10 col-md-offset-2 ">
<div id="mainCanvas" class="mainCanvas">正在加载中...</div>
</div>
</div>

<script type="text/javascript">
var zr; // 全局可用zrender对象
var zArea; //区域
var domMain = document.getElementById('mainCanvas');
require.config({
packages: [
{
name: 'zrender',
location: 'zrender/src',
main: 'zrender'
}
]
});
require(
[
'zrender',
'zrender/config',
'zrender/Storage',
'zrender/tool/area',
'zrender/tool/color',
'zrender/animation/Animation',
'zrender/shape/Star',
'zrender/shape/Circle',
'zrender/shape/Image',
'zrender/shape/Ring',
'zrender/shape/BezierCurve'
],
function(zrender, config, Storage, Area, color, Animation, StarShape, CircleShape, ImageShape,RingShape,BezierCurveShape){
//
zr = zrender.init( document.getElementById('mainCanvas') );

//背景底图
zr.addShape(bgimage = new ImageShape({
style : {
image : "bottom1.png",
x : 0,
y : 0,
width : 800,
height : 800,
lineWidth : 0
},
hoverable : false
}));
zr.addShape(ring_shape = new RingShape({
style: {
x: 400,
y: 400,
r0: 165,
r :380,
brushType : 'both',
color : 'rgba(220, 20, 60, 0)',          // rgba supported
//strokeColor : color.getColor(5),  // getColor from default palette
lineWidth : 1,
textPosition :'inside'
}
}));
//添加图片（上图中为了显示效果添加了5张图片，下面代码中只有一次）
var rotationPI = Math.PI / 180; //旋转角度
var origin = 1.1;
zr.addShape(testimg = new ImageShape({
style : {
x : 400,
y : 400,
image : "jy.png",
width : 80,
height : 80
},
draggable : true,
clickable : true,
onmousewheel: function(params){ //拖动
var eventTool = require('zrender/tool/event');
var delta = eventTool.getDelta(params.event);
var imgx = params.target.style.x; //图片位置 x
var imgy = params.target.style.y; //图片位置 y
var imgw = params.target.style.width; //图片宽度 width
var imgh = params.target.style.height; //图片高度 height
origin += (delta > 0 ? 1 : -1) * 0.1;
zr.modShape(params.target.id, {scale : [origin, origin, imgx+imgw/2, imgy+imgh/2]});
zr.refresh();
eventTool.stop(params.event);
},
onclick : function(params){
var imgx = params.target.style.x; //图片位置 x
var imgy = params.target.style.y; //图片位置 y
var imgw = params.target.style.width; //图片宽度 width
var imgh = params.target.style.height; //图片高度 height
var x = imgx + imgw/2;
var y = imgy + imgh/2;

rotationPI = rotationPI > Math.PI * 2 ? rotationPI % (Math.PI * 2) : rotationPI;
rotationPI += Math.PI * 5 /180;
zr.modShape(params.target.id, {
rotation: [rotationPI, x, y]
});
zr.refresh();
},
ondrift :function( shape, x, y){
console.info(shape);
}
}));
//获取图片
ImageURL = function(){
var ShapeURL = zr.toDataURL();
return ShapeURL;
};
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas zrender 旋转拖拽缩放

相关文章推荐

新的分享

章节导航