Javascript 我需要加载一个图像，并在其上画一些线放大和缩小后，我需要保存为pdf文件
我必须按照以下要求制作移动应用程序Javascript 我需要加载一个图像，并在其上画一些线放大和缩小后，我需要保存为pdf文件,javascript,android,angularjs,gesture,Javascript,Android,Angularjs,Gesture,我必须按照以下要求制作移动应用程序 1-加载图像，然后在其上绘制一些线，并将结果保存为pdf文件 2-用户能够放大和缩小图像 3-当他按finish时，结果必须保存为pdf文件 4-应用程序必须在android和IOS手机上运行 所以我选择使用monaca使用onsen（angularjs）（帮助我使用了一些有用的插件） 因此，我将该元素添加到我的html中 <ons-gesture-detector ng-pinchin= "onPinchInGesture()" ng-pinch
1-加载图像，然后在其上绘制一些线，并将结果保存为pdf文件
2-用户能够放大和缩小图像
3-当他按finish时，结果必须保存为pdf文件
4-应用程序必须在android和IOS手机上运行
所以我选择使用monaca使用onsen（angularjs）（帮助我使用了一些有用的插件）
因此，我将该元素添加到我的html中
<ons-gesture-detector ng-pinchin= "onPinchInGesture()" ng-pinchout="onPinchOutGesture()" ng-dragleft="onDragLeftGesture()" ng-dragright="onDragRightGesture()" ng-dragdown="onDragDownGesture()" ng-dragup="onSwipeUpGesture()">
<canvas id="the-canvas" width="300px" height="400px" style="border: 1px solid blue;">
Your browser does not support the canvas element.
</canvas>
</ons-gesture-detector>
所以我必须先放大，然后再寻找想要的部分 增加
如果有人感兴趣，这是正确的答案
$scope.loadImage = function(){
make_base(screen.width, screen.height, 0 , 0);
newWidth = screen.width;
newHeight = screen.height;
var canvas = document.getElementById("the-canvas");
var ctx = canvas.getContext('2d');
PhoneGapReady = true;
document.addEventListener('touchstart', touchStart);
document.addEventListener('touchmove', touchMove);
document.addEventListener('touchend', touchEnd);
document.addEventListener('touchCancel', touchCancel);
};
function make_base(x , y, xPos, yPos){
width = x;
height = y;
xPosition = xPos;
yPosition = yPos;
var canvas = document.getElementById('the-canvas'),
context = canvas.getContext('2d');
theImage = new Image();
theImage.src = 'file:///storage/emulated/0/Android/data/com.example.helloworld/files/11111.png';
theImage.height = imgHeight;
theImage.width = imgWidth;
theImage.style.left = currentOffsetX + "px";
theImage.style.top = currentOffsetY + "px";
theImage.onload = function(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(theImage, xPosition, yPosition, x, y);
};
}
function touchStart(event)
{
panning = false;
zooming = false;
if (event.touches.length == 1) {
panning = true;
startX0 = event.touches[0].pageX;
startY0 = event.touches[0].pageY;
}
if (event.touches.length == 2) {
zooming = true;
startX0 = event.touches[0].pageX;
startY0 = event.touches[0].pageY;
startX1 = event.touches[1].pageX;
startY1 = event.touches[1].pageY;
centerPointStartX = ((startX0 + startX1) / 2.0);
centerPointStartY = ((startY0 + startY1) / 2.0);
percentageOfImageAtPinchPointX = (centerPointStartX - currentOffsetX)/currentWidth;
percentageOfImageAtPinchPointY = (centerPointStartY - currentOffsetY)/currentHeight;
startDistanceBetweenFingers = Math.sqrt( Math.pow((startX1-startX0),2) + Math.pow((startY1-startY0),2) );
}
}
function touchMove(event)
{
// This keeps touch events from moving the entire window.
event.preventDefault();
if (panning) {
endX0 = event.touches[0].pageX;
endY0 = event.touches[0].pageY;
translateFromTranslatingX = endX0 - startX0;
translateFromTranslatingY = endY0 - startY0;
newOffsetX = currentOffsetX + translateFromTranslatingX;
newOffsetY = currentOffsetY + translateFromTranslatingY;
theImage.style.left = newOffsetX + "px";
theImage.style.top = newOffsetY + "px";
make_base(newWidth , newHeight, newOffsetX, newOffsetY);
}
else if (zooming) {
// Get the new touches
endX0 = event.touches[0].pageX;
endY0 = event.touches[0].pageY;
endX1 = event.touches[1].pageX;
endY1 = event.touches[1].pageY;
// Calculate current distance between points to get new-to-old pinch ratio and calc width and height
endDistanceBetweenFingers = Math.sqrt( Math.pow((endX1-endX0),2) + Math.pow((endY1-endY0),2) );
pinchRatio = endDistanceBetweenFingers/startDistanceBetweenFingers;
newContinuousZoom = pinchRatio * currentContinuousZoom;
newWidth = imgWidth * newContinuousZoom;
newHeight = imgHeight * newContinuousZoom;
// Get the point between the two touches, relative to upper-left corner of image
centerPointEndX = ((endX0 + endX1) / 2.0);
centerPointEndY = ((endY0 + endY1) / 2.0);
// This is the translation due to pinch-zooming
translateFromZoomingX = (currentWidth - newWidth) * percentageOfImageAtPinchPointX;
translateFromZoomingY = (currentHeight - newHeight) * percentageOfImageAtPinchPointY;
// And this is the translation due to translation of the centerpoint between the two fingers
translateFromTranslatingX = centerPointEndX - centerPointStartX;
translateFromTranslatingY = centerPointEndY - centerPointStartY;
// Total translation is from two components: (1) changing height and width from zooming and (2) from the two fingers translating in unity
translateTotalX = translateFromZoomingX + translateFromTranslatingX;
translateTotalY = translateFromZoomingY + translateFromTranslatingY;
// the new offset is the old/current one plus the total translation component
newOffsetX = currentOffsetX + translateTotalX;
newOffsetY = currentOffsetY + translateTotalY;
// Set the image attributes on the page
theImage.style.left = newOffsetX + "px";
theImage.style.top = newOffsetY + "px";
theImage.width = newWidth;
theImage.height = newHeight;
make_base(newWidth , newHeight, newOffsetX, newOffsetY);
}
}
function touchEnd(event)
{
if (panning) {
panning = false;
currentOffsetX = newOffsetX;
currentOffsetY = newOffsetY;
}
else if (zooming) {
zooming = false;
currentOffsetX = newOffsetX;
currentOffsetY = newOffsetY;
currentWidth = newWidth;
currentHeight = newHeight;
currentContinuousZoom = newContinuousZoom;
}
}
function touchCancel(event)
{
alert("cancel fired!");
if (panning) {
panning = false;
}
else if (zooming) {
zooming = false;
}
}
function make_base(x , y, xPos, yPos){
width = x;
height = y;
xPosition = xPos;
yPosition = yPos;
var canvas = document.getElementById('the-canvas'),
context = canvas.getContext('2d');
base_image = new Image();
base_image.src =image path;
base_image.onload = function(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(base_image, xPosition, yPosition, x, y);
};
}
$scope.loadImage = function(){
make_base(screen.width, screen.height, 0 , 0);
newWidth = screen.width;
newHeight = screen.height;
var canvas = document.getElementById("the-canvas");
var ctx = canvas.getContext('2d');
PhoneGapReady = true;
document.addEventListener('touchstart', touchStart);
document.addEventListener('touchmove', touchMove);
document.addEventListener('touchend', touchEnd);
document.addEventListener('touchCancel', touchCancel);
};
function make_base(x , y, xPos, yPos){
width = x;
height = y;
xPosition = xPos;
yPosition = yPos;
var canvas = document.getElementById('the-canvas'),
context = canvas.getContext('2d');
theImage = new Image();
theImage.src = 'file:///storage/emulated/0/Android/data/com.example.helloworld/files/11111.png';
theImage.height = imgHeight;
theImage.width = imgWidth;
theImage.style.left = currentOffsetX + "px";
theImage.style.top = currentOffsetY + "px";
theImage.onload = function(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(theImage, xPosition, yPosition, x, y);
};
}
function touchStart(event)
{
panning = false;
zooming = false;
if (event.touches.length == 1) {
panning = true;
startX0 = event.touches[0].pageX;
startY0 = event.touches[0].pageY;
}
if (event.touches.length == 2) {
zooming = true;
startX0 = event.touches[0].pageX;
startY0 = event.touches[0].pageY;
startX1 = event.touches[1].pageX;
startY1 = event.touches[1].pageY;
centerPointStartX = ((startX0 + startX1) / 2.0);
centerPointStartY = ((startY0 + startY1) / 2.0);
percentageOfImageAtPinchPointX = (centerPointStartX - currentOffsetX)/currentWidth;
percentageOfImageAtPinchPointY = (centerPointStartY - currentOffsetY)/currentHeight;
startDistanceBetweenFingers = Math.sqrt( Math.pow((startX1-startX0),2) + Math.pow((startY1-startY0),2) );
}
}
function touchMove(event)
{
// This keeps touch events from moving the entire window.
event.preventDefault();
if (panning) {
endX0 = event.touches[0].pageX;
endY0 = event.touches[0].pageY;
translateFromTranslatingX = endX0 - startX0;
translateFromTranslatingY = endY0 - startY0;
newOffsetX = currentOffsetX + translateFromTranslatingX;
newOffsetY = currentOffsetY + translateFromTranslatingY;
theImage.style.left = newOffsetX + "px";
theImage.style.top = newOffsetY + "px";
make_base(newWidth , newHeight, newOffsetX, newOffsetY);
}
else if (zooming) {
// Get the new touches
endX0 = event.touches[0].pageX;
endY0 = event.touches[0].pageY;
endX1 = event.touches[1].pageX;
endY1 = event.touches[1].pageY;
// Calculate current distance between points to get new-to-old pinch ratio and calc width and height
endDistanceBetweenFingers = Math.sqrt( Math.pow((endX1-endX0),2) + Math.pow((endY1-endY0),2) );
pinchRatio = endDistanceBetweenFingers/startDistanceBetweenFingers;
newContinuousZoom = pinchRatio * currentContinuousZoom;
newWidth = imgWidth * newContinuousZoom;
newHeight = imgHeight * newContinuousZoom;
// Get the point between the two touches, relative to upper-left corner of image
centerPointEndX = ((endX0 + endX1) / 2.0);
centerPointEndY = ((endY0 + endY1) / 2.0);
// This is the translation due to pinch-zooming
translateFromZoomingX = (currentWidth - newWidth) * percentageOfImageAtPinchPointX;
translateFromZoomingY = (currentHeight - newHeight) * percentageOfImageAtPinchPointY;
// And this is the translation due to translation of the centerpoint between the two fingers
translateFromTranslatingX = centerPointEndX - centerPointStartX;
translateFromTranslatingY = centerPointEndY - centerPointStartY;
// Total translation is from two components: (1) changing height and width from zooming and (2) from the two fingers translating in unity
translateTotalX = translateFromZoomingX + translateFromTranslatingX;
translateTotalY = translateFromZoomingY + translateFromTranslatingY;
// the new offset is the old/current one plus the total translation component
newOffsetX = currentOffsetX + translateTotalX;
newOffsetY = currentOffsetY + translateTotalY;
// Set the image attributes on the page
theImage.style.left = newOffsetX + "px";
theImage.style.top = newOffsetY + "px";
theImage.width = newWidth;
theImage.height = newHeight;
make_base(newWidth , newHeight, newOffsetX, newOffsetY);
}
}
function touchEnd(event)
{
if (panning) {
panning = false;
currentOffsetX = newOffsetX;
currentOffsetY = newOffsetY;
}
else if (zooming) {
zooming = false;
currentOffsetX = newOffsetX;
currentOffsetY = newOffsetY;
currentWidth = newWidth;
currentHeight = newHeight;
currentContinuousZoom = newContinuousZoom;
}
}
function touchCancel(event)
{
alert("cancel fired!");
if (panning) {
panning = false;
}
else if (zooming) {
zooming = false;
}
}