<div id="panId" class="moveAble">
<canvas id="canvas" class="mg_image">
<img name="imageName2" id="mainImage" class="imagepics"
*ngIf="showImage"
src="{{imageVisible ? droppedImage: firtsImageToBind}}">
</canvas>
</div>
我的打字稿代码如下。
forActivateZooming(event: MouseEvent) {
document.getElementById('panId').style.cursor = "zoom-in";
this.showImage = true;
this.imageVisible = false;
var zoomIntensity = 5;
var canvas = <HTMLCanvasElement>document.getElementById("canvas");
var image = document.getElementById("mainImage");
var context = canvas.getContext("2d");
context.moveTo(0, 0);
var img = document.getElementById("mainImage");
var srcOfImg = img.attributes.getNamedItem('src').value;
var width = 2000;
var height = 2000;
var scale = 10;
var originx = 0;
var originy = 0;
var visibleWidth = width;
var visibleHeight = height;
var count = 10;
canvas.onmousewheel = function (event) {
event.preventDefault();
// Get mouse offset.
// var mousex = event.clientX - canvas.offsetLeft;
// var mousey = event.clientY - canvas.offsetTop;
var offset = $(this).offset();
var mousex = event.clientX - offset.left;
var mousey = event.clientY - offset.top;
// Normalize wheel to +1 or -1.
var wheel = event.wheelDelta / 120;
// Compute zoom factor.
var zoom = Math.exp(wheel * zoomIntensity);
// Translate so the visible origin is at the context's origin.
context.translate(originx, originy);
// Compute the new visible origin. Originally the mouse is at a
// distance mouse/scale from the corner, we want the point under
// the mouse to remain in the same place after the zoom, but this
// is at mouse/new_scale away from the corner. Therefore we need to
// shift the origin (coordinates of the corner) to account for this.
originx -= mousex / (scale * zoom) - mousex / scale;
originy -= mousey / (scale * zoom) - mousey / scale;
// alert(originx);
// alert(originy);
// alert(zoom);
// Scale it (centered around the origin due to the trasnslate above).
context.scale(originx, originy);
// Offset the visible origin to it's proper position.
context.translate(-originx, -originy);
var ratio = 5;
var vpx = 0;
var vpy = 0;
var vpw = window.innerWidth;
var vph = window.innerHeight;
var orig_width = 2000;
var orig_height = 2000;
//var width = 4000
//var height = 4000
if (event.wheelDelta >= 120) {
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
// var u_top = $('.mg-image').offset().top;
// var u_left = $('.mg-image').offset().left;
// alert(u_top);
// alert(u_left);
// $('.mg-image').css('left', '10%');
// $('.mg-image').css('top', '10%');
//var ratio = image.clientHeight / image.clientWidth;
var curLeft = image.offsetLeft;
// alert(curLeft);
var curTop = image.offsetTop;
// alert(curTop);
// $('.mg_image').css({
// height: image.clientHeight + (20 * ratio),
// width: image.clientWidth + (20 * ratio),
// left: curLeft - ((20 * ratio) / 2),
// top: curTop - ((20 * ratio) / 2)
// });
// zoom center point
// var targetX = event.clientX || (vpw / 2);
// var targetY = event.clientY || (vph / 2);
// // percentages from side
// var pX = ((vpx * -1) + targetX) * 100 / width;
// var pY = ((vpy * -1) + targetY) * 100 / height;
// // translate view back to center point
// var x = ((width * pX / 100) - targetX);
// var y = ((height * pY / 100) - targetY);
// $('.mg_image').css({
// // height: image.clientHeight + (20 * ratio),
// // width: image.clientWidth + (20 * ratio),
// left: curLeft - ((20 * ratio) / 2),
// top: curTop - ((20 * ratio) / 2)
// });
// var position = $('.mg_image').position();
// //alert(position.left);
// //alert(position.top);
// var newLeft = position.left - 10;
// var newTop = position.top - 10;
// canvas.style.top = newLeft + '0%';
// canvas.style.left = newTop + '0%';
// $('#canvas').css({
// height: offsetHeightvalue - 5,
// width: offsetWidthvalue - 5,
// left: offsetLeftvalue - 5,
// top: offsetTopvalue - 5
// });
// resizeCall(++count);
}
else if (event.wheelDelta <= -120) {
// canvas.width = canvas.width / ratio;
// canvas.height = canvas.height / ratio;
// var u_top = $('.mg-image').offset().top;
// var u_left = $('.mg-image').offset().left;
// alert(u_top);
// alert(u_left);
// $('.mg-image').css('left', u_left--);
// $('.mg-image').css('top', u_top--);
// var ratio = image.clientHeight / image.clientWidth;
var curLeft = image.offsetLeft;
// alert(curLeft);
var curTop = image.offsetTop;
// alert(curTop);
var offsetLeftvalue = canvas.offsetLeft;
var offsetTopvalue = canvas.offsetTop;
var offsetHeightvalue = canvas.offsetHeight;
var offsetWidthvalue = canvas.offsetWidth;
canvas.width;
canvas.height;
// $('#canvas').css({
// align: offsetHeightvalue - 5,
// width: offsetWidthvalue - 5,
// left: offsetLeftvalue - 5,
// top: offsetTopvalue - 5
// });
// $('.mg_image').css({
// height: image.clientHeight + (20 * ratio),
// width: image.clientWidth + (20 * ratio),
// left: curLeft - ((20 * ratio) / 2),
// top: curTop - ((20 * ratio) / 2)
// });
// // zoom center point
// var targetX = event.clientX || (vpw / 2);
// var targetY = event.clientY || (vph / 2);
// // percentages from side
// var pX = ((vpx * -1) + targetX) * 100 / width;
// var pY = ((vpy * -1) + targetY) * 100 / height;
// // translate view back to center point
// var x = ((width * pX / 100) - targetX);
// var y = ((height * pY / 100) - targetY);
// $('.mg_image').css({
// // height: image.clientHeight + (20 * ratio),
// // width: image.clientWidth + (20 * ratio),
// left: curLeft - ((20 * ratio) / 2),
// top: curTop - ((20 * ratio) / 2)
// });
//alert(position.left);
//alert(position.top);
// var position = $('.mg_image').position();
// var newLeft = position.left - 10;
// var newTop = position.top - 10;
// canvas.style.top = newLeft + '0%';
// canvas.style.left = newTop + '0%';
// resizeCall(--count);
return false;
}
}
function resizeCall(c: any) {
var img = <HTMLCanvasElement>document.getElementById('mainImage');
var sizeWidth = context.canvas.clientWidth;
var sizeHeight = context.canvas.clientHeight;
// var x = event.pageX;
// var y = event.pageY;
// var width = canvas.width;
// var height = canvas.height;
//context.scale(x + width / 2, y + height / 2);
// alert(c);
// img.style.zoom = c + '0%';
// canvas.width = 2000;
// canvas.height = 2000;
// alert(canvas.getBoundingClientRect());
// var context = canvas.getContext("2d");
// var ratio = canvas.height / canvas.width;
// var curLeft = canvas.offsetLeft;
// //alert(curLeft);
// var curTop = canvas.offsetTop;
// // alert(curTop);
// $('.mg_image').css({
// // height: canvas.height + (20 * ratio),
// // width: canvas.width + (20 * ratio),
// left: curLeft - ((50 * ratio) / 2),
// top: curTop - ((50 * ratio) / 2)
// });
//context.moveTo(0, 0);
canvas.style.zoom = c + '0%';
// canvas.style.left = c ;
// canvas.style.top = c ;
//canvas.width = sizeWidth + c;
// canvas.height = sizeHeight +c;
// img.width = img.width + c;
// img.height = img.height + c;
//alert(img.width);
//alert(img.height);
// // this.url = 'http://mediotrenderingservice-dev.us-west-2.elasticbeanstalk.com/api/wado?requestType=wado&studyUID=1&seriesUID=46&ObjectUID=370&rows=' + this.clientX + '&columns=' + this.clientY;
// this.url = 'http://mediotrenderservice-env.us-west-2.elasticbeanstalk.com/api/wado?requestType=wado&studyUID=65&seriesUID=46&ObjectUID=' + this.currentObjectId.toString() + '&rows=' + rows + '&columns=' + columns;
// // http://mediotrenderservice-env.us-west-2.elasticbeanstalk.com/api/wado?requestType=wado&studyUID=65&seriesUID=46&ObjectUID=372&rows=512&columns=512
// console.log(this.url);
// this.http.get(this.url)
// .map((res: Response) => res.json())
// .subscribe(data => {
// console.log(data);
// this.firtsImageToBind = "";
// this.showImage = true;
// this.imageVisible = false;
// // this.firtsImageToBind = 'data:image/png;base64,' + data.DCMImageBuffer;
// var canvas = <HTMLCanvasElement>document.getElementById("canvas");
// canvas.width = 2000;
// canvas.height = 2000;
// var context = canvas.getContext("2d");
// var img = new Image();
// img.onload = function () {
// var width = rows;
// var height = columns;
// context.drawImage(img, 0, 0, width, height);
// }
// // img.width = 100;
// // img.height = 100;
// this.firtsImageToBind = 'data:image/png;base64,' + data.DCMImageBuffer;
// img.src = this.firtsImageToBind;
// console.log(this.firtsImageToBind);
// }, (err) => console.error(err),
// () => console.log('done')
// );
}
// document.addEventListener('DOMMouseScroll', moveObject,false);
// document.onmousewheel = moveObject;
// function moveObject(event: any) {
// var delta = 0;
// if (!event) event = window.event;
// // normalize the delta
// if (event.wheelDelta) {
// // IE and Opera
// delta = event.wheelDelta / 60;
// } else if (event.detail) {
// // W3C
// delta = -event.detail / 2;
// }
// var currPos = document.getElementById('mainImage').offsetTop;
// //calculating the next position of the object
// currPos = currPos - (delta * 10);
// //moving the position of the object
// document.getElementById('mainImage').style.top = currPos + "px";
// document.getElementById('mainImage').innerHTML //code below
// = event.wheelDelta + ":" + event.detail;
// }
// $(document).ready(function () {
// $("#panId").mouseup(function () {
// // $("#mainImage").focus({ "outline": "none" });
// $("#mainImage").focus(function () {
// $("#mainImage").css("outline", "none");
// });
// });
// $("#panId").mousedown(function () {
// var target = document.getElementById('mainImage');
// var height = target.clientHeight;
// var width = target.clientWidth;
// height = height + 5;
// width = width + 5;
// $("#mainImage").css({ "height": height, "width": width });
// this.url = 'http://mediotrenderservice-env.us-west-2.elasticbeanstalk.com/api/wado?requestType=wado&studyUID=65&seriesUID=46&ObjectUID=' + this.currentObjectId.toString() + '&rows=' + width + '&columns=' + height;
// console.log(this.url);
// // this.http.get(this.url)
// // .map((res: Response) => res.json())
// // .subscribe(data => {
// // console.log(data);
// // this.firtsImageToBind = "";
// // this.showImage = true;
// // this.imageVisible = false;
// // this.firtsImageToBind = 'data:image/png;base64,' + data.DCMImageBuffer;
// // console.log(this.firtsImageToBind);
// // }, (err) => console.error(err),
// // () => console.log('done')
// // );
// });
// });
}
我的要求是图像缩放（在集中缩放中）。
请提供任何解决方案