Canvas In Image Viewer
来源:互联网 发布:北航矩阵论答案 编辑:程序博客网 时间:2024/05/23 22:42
1:Cause
improve zoom functionality of html5 imageviewer. zoom in the picture by the mouse.
2:Bring in the Scalable Vector Graphics (SVG)
Before: Canvas is based on the bitmap image, it can not change the size, scale display only. SVG is an earlier standard for drawing shapes in browsers. SVG is based on the vector at the same time, all it can to change the size of good graphics processing.
3:Canvas track transform to SVG use js
var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg'); var xform = svg.createSVGMatrix(); ctx.getTransform = function(){ return xform; }; var savedTransforms = []; var save = ctx.save; ctx.save = function(){ savedTransforms.push(xform.translate(0,0)); return save.call(ctx); }; var restore = ctx.restore; ctx.restore = function(){ xform = savedTransforms.pop(); return restore.call(ctx); }; var scale = ctx.scale; ctx.scale = function(sx,sy){ xform = xform.scaleNonUniform(sx,sy); return scale.call(ctx,sx,sy); }; var rotate = ctx.rotate; ctx.rotate = function(radians){ xform = xform.rotate(radians*180/Math.PI); return rotate.call(ctx,radians); }; var translate = ctx.translate; ctx.translate = function(dx,dy){ xform = xform.translate(dx,dy); return translate.call(ctx,dx,dy); }; var transform = ctx.transform; ctx.transform = function(a,b,c,d,e,f){ var m2 = svg.createSVGMatrix(); m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f; xform = xform.multiply(m2); return transform.call(ctx,a,b,c,d,e,f); }; var setTransform = ctx.setTransform; ctx.setTransform = function(a,b,c,d,e,f){ xform.a = a; xform.b = b; xform.c = c; xform.d = d; xform.e = e; xform.f = f; return setTransform.call(ctx,a,b,c,d,e,f); }; var pt = svg.createSVGPoint(); ctx.transformedPoint = function(x,y){ pt.x=x; pt.y=y; return pt.matrixTransform(xform.inverse()); }
4: The standard method of Canvas
1:save() : Saves the entire state of the canvas.
2:restore(): Restores the most recently saved canvas state.
3:translate(x,y): Move the canvas and its origin on the grid. x is the horizontal distance to move, y is the vertical distance to move.
4:rotate(angle): Rotate around the current origin by the angle number of radians.
5:scaling(x,y): Scales the units by x horizontal and y vertically. default is x=1 and y =1.
6:setTransform(a,b,c,d,e,f): Multiplies the current transformation matrix with the matrix described by its arguments. the default is setTransform(1, 0, 0, 1, 0, 0).
a: Horizontal scaling.
b:Horizontal skewing.
c:Vertical skewing.
d:Vertical scaling.
e:Horizontal moving.
f: Vertical moving.
7:drawImage(img,sx,sy,swidth,sheight,x,y,width,height): Draw the image in the canvas.
parameter description
img image source
sx optional. the x coordinate of shear the image
sy optional. the y coordinate of shear the image
swidth optional. the y coordinate of shear the image
sheight optional. the y coordinate of shear the image
x the begin x coordinate of image
y the begin y coordinate of image
width optional. display image width
height optional. display image height
5: In Image Viewer Case
1:set the origin of coordinates.
default image position
//translate the coordinate.//we need set the coordinate original point to the canvas center.Canvas.prototype.tanslateCoordinate = function(canvas){ if(!this.isTranslated){ this.context.translate(canvas.width/2,canvas.height/2); this.isTranslated = true; }}//draw the image.Canvas.prototype.drawContextImage = function(image,canvas){ // dirtyFlag = false means it is a new image, but the medavisCanvas is null, the first time to draw image on the canvas, no state existed yet // if the canvas marked as dirty, then no need to load the image, $(canvas).attr("dirty", "true"); if(this.fitFlag){ //parameter 1:image data 2:image x coordinate 3:image y coordinate 4:image x width 5:image height //we need draw the image in the original point. this.context.drawImage(image, -image.width*this.multiple/2,-image.height*this.multiple/2,image.width*this.multiple,image.height*this.multiple); // draw the image }else{ this.context.drawImage(image,-image.width/2,-image.height/2); // draw the original image }}
4:Zoom in by the mouse
./**----image zoom in out function----*/Canvas.prototype.zoomInOut = function(image,canvas,scale,lastX,lastY){ this.clearRect(image,canvas); this.tanslateCoordinate(canvas); var pt = this.context.transformedPoint(lastX,lastY); //get the x and y this.dragStart = this.context.transformedPoint(lastX,lastY); //translate this.context.translate(pt.x,pt.y); //scale var factor = 1 + scale; this.context.scale(factor,factor); this.scaleFactor =this.scaleFactor * factor; // revert. this.context.translate(-pt.x/factor,-pt.y/factor); this is the true revert. if(MedicalViewerAPI.selectSeries){ this.context.translate(-pt.x/factor,-pt.y/factor); }else{ this.context.translate(-pt.x,-pt.y); } this.drawContextImage(image,canvas)};
5:Pan mode move image.
get the mouse down x and y position and get the move position.
// get mouse down x and y coordinate value.Canvas.prototype.mouseDown = function(image,canvas,e){ this.lastX = e.offsetX || (e.pageX - canvas.offsetLeft); this.lastY = e.offsetY || (e.pageY - canvas.offsetTop); // save the mouse down coordinate for after move envet to calculate the distance. this.dragStart = this.context.transformedPoint(this.lastX,this.lastY); //for move series when mouse is out of the canvas need to reset the flag . if(MedicalViewerAPI.selectSeries){ this.setFirstDragStart(); }};//It's depend on the coordinate statusCanvas.prototype.moveImage=function(e,image,canvas){ var lastX = e.offsetX || (e.pageX - canvas.offsetLeft); var lastY = e.offsetY || (e.pageY - canvas.offsetTop); var pt = this.context.transformedPoint(lastX,lastY); this.clearRect(image,canvas); this.context.translate(pt.x-this.dragStart.x,pt.y-this.dragStart.y); this.tanslateCoordinate(canvas); this.drawContextImage(image,canvas);};
6:Rotate and Flip
Canvas.prototype.drawRotated = function (image,canvas,degrees){ this.clearRect(image,canvas); this.tanslateCoordinate(canvas); this.rotatedCanvas(canvas,degrees); this.drawContextImage(image,canvas);}Canvas.prototype.rotatedCanvas = function (canvas,degrees){ this.context.rotate(degrees*Math.PI/180);}Canvas.prototype.rotateLeft=function(image,canvas){ var flipHorFlag = this.flipHor ? -1 : 1; var flipVorFlag = this.flipVor ? -1 : 1; //when in fliph or flipv rotate left and rotate right need to reversal. this.angleInDegrees-=90*flipHorFlag*flipVorFlag; this.angleInDegrees = this.angleInDegrees%360 this.drawRotated(image,canvas,-90*flipHorFlag*flipVorFlag); //push it in the rotateAndFlipSteps to use in original and revert function. this.rotateAndFlipSteps.push(0);};Canvas.prototype.rotateRight=function(image,canvas){ var flipHorFlag = this.flipHor ? -1 : 1; var flipVorFlag = this.flipVor ? -1 : 1; this.angleInDegrees+=90*flipHorFlag*flipVorFlag; this.angleInDegrees = this.angleInDegrees%360 this.drawRotated(image,canvas,90*flipHorFlag*flipVorFlag); this.rotateAndFlipSteps.push(1);};/**---------------rotate function end---------------------**//**---------------flip image function---------------------**/Canvas.prototype.flipH=function(image,canvas){ this.flipHor = !this.flipHor; this.clearRect(image,canvas); this.tanslateCoordinate(canvas); if((Math.abs(this.angleInDegrees) ==90 || Math.abs(this.angleInDegrees) ==270)){ this.context.scale(1, -1); // Set scale to flip. }else{ this.context.scale(-1, 1); } this.drawContextImage(image,canvas); this.rotateAndFlipSteps.push(3);};Canvas.prototype.flipV=function(image,canvas){ //need to save this image is flip or not. this.flipVor = !this.flipVor; this.clearRect(image,canvas); this.tanslateCoordinate(canvas); if((Math.abs(this.angleInDegrees) ==90 || Math.abs(this.angleInDegrees) ==270)){ this.context.scale(-1, 1); // Set scale to flip. }else{ this.context.scale(1, -1); } this.drawContextImage(image,canvas); this.rotateAndFlipSteps.push(2);};
- Canvas In Image Viewer
- A Basic Image Viewer
- FastStone Image Viewer 介绍
- Offline Image Viewer Guide
- Offline Image Viewer Guide
- Qt-Image Viewer Example
- Dicom Image Viewer for iPad
- Dicom Image Viewer for iPad
- Qt示例[Image Viewer Example]
- canvas替换image插件
- Image转Canvas注意事项
- FastStone.Image.Viewer.4.keygen-REPT
- canvas 执行canvas.toDataURL("image/png"); 出错
- Canvas与Image互相转换
- Image与Canvas相互转换
- Image与Canvas相互转换
- html canvas[autodyne] image clipping
- canvas和image互相转换
- 知道了很多道理,仍然过不好这一生
- 阿里云前端周刊
- 机器人技术基础pdf
- 2019第14届中东(阿布扎比)国际防务展
- 逻辑分辨率和物理分辨率
- Canvas In Image Viewer
- webpack使用
- vue+element-ui上传文件
- Spring MVC中使用 Swagger2 构建Restful API
- mysql时间和本地时间相差13个小时
- 编译mongodb client debug版
- struts2入门
- Qt内存泄漏总结(包括检测工具)
- freemarker标签用法(二)