区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理
canvas id="imageCanvas" > /canvas>
javascript主要代码:
复制代码
1
2 VAR canvas=$("#imageCanvas").get(0);
3 var context=canvas.getContext("2d");
4 var oldX,oldY,newX,newY;
5 var enabled=false;
6 canvas.onmousedown=function(event){
7 enabled=true;
8 oldX = event.clientX; //实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientX
9 oldY = event.clientY; //实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientY
10
11 } ;
12 canvas.onmouseup=function(event) {
13 enabled = false;
14 } ;
15 canvas.onmouSEMove=function(event) {
16 if (!enabled) {
17 return;
18 }
19 newX=event.clientX; //实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientX
20 newY=event.clientY; //实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientY
21 moveimage();
22 oldX=newX;
23 oldY=newY;
24 } ;
25 function moveImage(){
26 var moveX=(newX - oldX);
27 var moveY=(newY - oldY);
28
29
30 //图像移动
31 context.transform(1,0,0,1,moveX,moveY);
32 context.drawImage(image);
33
34 }
html页面主要代码:
canvas id="imageCanvas" > /canvas>
javascript主要代码:
复制代码
1
2 var canvas=$("#imageCanvas").get(0);
3 var context=canvas.getContext("2d");
4 var oldX,oldY,newX,newY;
5 var enabled=false;
6 canvas.onmousedown=function(event){
7 enabled=true;
8 oldX = event.clientX; //实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientX
9 oldY = event.clientY; //实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientY
10
11 } ;
12 canvas.onmouseup=function(event) {
13 enabled = false;
14 } ;
15 canvas.onmousemove=function(event) {
16 if (!enabled) {
17 return;
18 }
19 newX=event.clientX; //实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientX
20 newY=event.clientY; //实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientY
21 moveImage();
22 oldX=newX;
23 oldY=newY;
24 } ;
25 function moveImage(){
26 var moveX=(newX - oldX);
27 var moveY=(newY - oldY);
28
29
30 //图像移动
31 context.transform(1,0,0,1,moveX,moveY);
32 context.drawImage(image);
33
34 }
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理
本文地址: https://pptw.com/jishu/586379.html