search

vrjgamer / Custom-Alert-Dialog-Box

This is an example for creating a custom alert dialog box
1 stars 2 forks source link

get event of both canvas in html5 #2

Open pritammalunjkar opened 3 years ago

pritammalunjkar commented 3 years ago

//This is js code---- var mousePressed = false; var lastX, lastY; //var ctx; // Make sure the image is loaded first otherwise nothing will draw.

const IMG_NAMES = { CARDIOVASCULAR_SYSTEM: 'Cardiovascular_System.jpg', FEMALE_REPRODUCTIVE_SYSTEM_1: 'Female_Reproductive_System_1.jpg', FEMALE_REPRODUCTIVE_SYSTEM_2: 'FeMale_Reproductive_System_2.jpg', GASTROINTESTINAL_SYSTEM: 'Gastrointestinal_System.jpg', MALE_REPRODUCTIVE_SYSTEM: 'Male_Reproductive_System.jpg', NEUROLOGICAL_SYSTEM: 'Neurological_System.jpg', RESPIRATORY_SYSTEM: 'Respiratory_System.jpg', UROGENITAL_SYSTEM_EXAMINATION: 'Urogenital_System_examination.jpg',

ABDOMINAL_EXAMINATION: 'Abdominal_Examination.jpg',
ANAL_EXAMINATION: 'Anal_Examination.jpg',
BREAST_EXAMINATION: 'Breast_Examination.jpg',
CHEST_EXAMINATION: 'Chest_Examination.jpg',
EAR_EXAMINATION: 'Ear_Examination.jpg',
EYE_EXAMINATION: 'Eye_Examination.jpg',
HEAD_EXAMINATION: 'Head_Examination.jpg',
JOINT_EXAMINATION: 'Joint_Examination.jpg',
MOUTH_EXAMINATION: 'Mouth_Examination.jpg',
NOSE_EXAMINATION: 'Nose_Examination.jpg',
SYSTEMIC_EXAMINATION: 'Systemic_Examination.jpg',
TONGUE_EXAMINATION: 'Tongue_Examination.jpg',

}

function fnloadBodyTemplate(img_name) {

ctx = document.getElementById('myCanvas').getContext("2d");
var background = new Image();

background.src = "../Content/Images/ce_images/" + img_name;
background.onload = function () {
    // alert("background.onload:"+background);
    //alert(background);
    //ctx.drawImage(background, ctx.width / 2 - background.width / 2, ctx.height / 2 - background.height / 2);
    ctx.drawImage(background, 100, 0);
}

}

function InitThis(CE_id) { alert("InitThis Function:"+CE_id); // CE_id = "1"; // alert(IMG_NAMES.CARDIOVASCULAR_SYSTEM);

switch (CE_id) {
    case 1:  //Cardiovascular System
        fnloadBodyTemplate(IMG_NAMES.CARDIOVASCULAR_SYSTEM);
        break;
    case 2:  //Female Reproductive System 1
        fnloadBodyTemplate(IMG_NAMES.FEMALE_REPRODUCTIVE_SYSTEM_1);
        break;
    case 3:  //Female Reproductive System 2
        fnloadBodyTemplate(IMG_NAMES.FEMALE_REPRODUCTIVE_SYSTEM_2);
        break;
    case 4:  //Gastrointestinal System
        fnloadBodyTemplate(IMG_NAMES.GASTROINTESTINAL_SYSTEM);
        break;
    case 5:  //Male Reproductive System
        fnloadBodyTemplate(IMG_NAMES.MALE_REPRODUCTIVE_SYSTEM);
        break;
    case 6:  //Neurological System
        fnloadBodyTemplate(IMG_NAMES.NEUROLOGICAL_SYSTEM);
        break;
    case 7:  //Respiratory System
        fnloadBodyTemplate(IMG_NAMES.RESPIRATORY_SYSTEM);
        break;
    case 8:  //Urogenital System examination
        fnloadBodyTemplate(IMG_NAMES.UROGENITAL_SYSTEM_EXAMINATION);
        break;

    case 9:  //Abdominal Examination
        fnloadBodyTemplate(IMG_NAMES.ABDOMINAL_EXAMINATION);
        break;
    case 10:  //Anal Examination
        fnloadBodyTemplate(IMG_NAMES.ANAL_EXAMINATION);
        break;
    case 11:  //Breast Examination
        fnloadBodyTemplate(IMG_NAMES.BREAST_EXAMINATION);
        break;
    case 12:  //Chest Examination
        fnloadBodyTemplate(IMG_NAMES.CHEST_EXAMINATION);
        break;
    case 13:  //Ear Examination
        fnloadBodyTemplate(IMG_NAMES.EAR_EXAMINATION);
        break;
    case 14:  //Eye Examination
        fnloadBodyTemplate(IMG_NAMES.EYE_EXAMINATION);
        break;
    case 15:  //Head Examination
        fnloadBodyTemplate(IMG_NAMES.HEAD_EXAMINATION);
        break;
    case 16:  //Joint Examination
        fnloadBodyTemplate(IMG_NAMES.JOINT_EXAMINATION);
        break;
    case 17:  //Mouth Examination
        fnloadBodyTemplate(IMG_NAMES.MOUTH_EXAMINATION);
        break;
    case 18:  //Nose Examination
        fnloadBodyTemplate(IMG_NAMES.NOSE_EXAMINATION);
        break;
    case 19:  //Systemic Examination
        fnloadBodyTemplate(IMG_NAMES.SYSTEMIC_EXAMINATION);
        break;
    case 20:  //Tongue Examination
        fnloadBodyTemplate(IMG_NAMES.TONGUE_EXAMINATION);
        break;

}

debugger;
//  ctx = document.getElementById('myCanvas').getContext("2d");
//   var background = new Image();
//   background.src = "../Content/Images/Head_Examination.jpg";  // This need to change as per Examination ID
// alert(background.src);

//document.getElementById("myCanvas").style.background = "url(Content/Images/Head_Examination.jpg)";

$('#myCanvas').mousedown(function (e) {
    //  alert(e);
    mousePressed = true;
    Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});

$('#myCanvas').mousemove(function (e) {
    if (mousePressed) {
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
    }
});

$('#myCanvas').mouseup(function (e) {
    mousePressed = false;
});
$('#myCanvas').mouseleave(function (e) {
    mousePressed = false;
});

}

function Draw(x, y, isDown) { if (isDown) { ctx.beginPath(); ctx.strokeStyle = $('#selColor').val(); ctx.lineWidth = $('#selWidth').val(); ctx.lineJoin = "round"; ctx.moveTo(lastX, lastY); ctx.lineTo(x, y); ctx.closePath(); ctx.stroke(); } lastX = x; lastY = y; }

function clearArea(CE_id) { // Use the identity matrix while clearing the canvas //alert(CE_id); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

switch (CE_id) {
    case 1:  //Cardiovascular System
        fnloadBodyTemplate(IMG_NAMES.CARDIOVASCULAR_SYSTEM);
        break;
    case 2:  //Female Reproductive System 1
        fnloadBodyTemplate(IMG_NAMES.FEMALE_REPRODUCTIVE_SYSTEM_1);
        break;
    case 3:  //Female Reproductive System 2
        fnloadBodyTemplate(IMG_NAMES.FEMALE_REPRODUCTIVE_SYSTEM_2);
        break;
    case 4:  //Gastrointestinal System
        fnloadBodyTemplate(IMG_NAMES.GASTROINTESTINAL_SYSTEM);
        break;
    case 5:  //Male Reproductive System
        fnloadBodyTemplate(IMG_NAMES.MALE_REPRODUCTIVE_SYSTEM);
        break;
    case 6:  //Neurological System
        fnloadBodyTemplate(IMG_NAMES.NEUROLOGICAL_SYSTEM);
        break;
    case 7:  //Respiratory System
        fnloadBodyTemplate(IMG_NAMES.RESPIRATORY_SYSTEM);
        break;
    case 8:  //Urogenital System examination
        fnloadBodyTemplate(IMG_NAMES.UROGENITAL_SYSTEM_EXAMINATION);
        break;

    case 9:  //Abdominal Examination
        fnloadBodyTemplate(IMG_NAMES.ABDOMINAL_EXAMINATION);
        break;
    case 10:  //Anal Examination
        fnloadBodyTemplate(IMG_NAMES.ANAL_EXAMINATION);
        break;
    case 11:  //Breast Examination
        fnloadBodyTemplate(IMG_NAMES.BREAST_EXAMINATION);
        break;
    case 12:  //Chest Examination
        fnloadBodyTemplate(IMG_NAMES.CHEST_EXAMINATION);
        break;
    case 13:  //Ear Examination
        fnloadBodyTemplate(IMG_NAMES.EAR_EXAMINATION);
        break;
    case 14:  //Eye Examination
        fnloadBodyTemplate(IMG_NAMES.EYE_EXAMINATION);
        break;
    case 15:  //Head Examination
        fnloadBodyTemplate(IMG_NAMES.HEAD_EXAMINATION);
        break;
    case 16:  //Joint Examination
        fnloadBodyTemplate(IMG_NAMES.JOINT_EXAMINATION);
        break;
    case 17:  //Mouth Examination
        fnloadBodyTemplate(IMG_NAMES.MOUTH_EXAMINATION);
        break;
    case 18:  //Nose Examination
        fnloadBodyTemplate(IMG_NAMES.NOSE_EXAMINATION);
        break;
    case 19:  //Systemic Examination
        fnloadBodyTemplate(IMG_NAMES.SYSTEMIC_EXAMINATION);
        break;
    case 20:  //Tongue Examination
        fnloadBodyTemplate(IMG_NAMES.TONGUE_EXAMINATION);
        break;

}

}

//-------------Button submit

//-------------

function fnAddNote1(vartext) { //http://jsfiddle.net/dval/Kz7VL/ //var texts = []; // alert("Inside Submit Click"); var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

// variables used to get mouse position on the canvas
var $canvas = $("#myCanvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;

// an array to hold text objects
var texts = [];

// this var will hold the index of the hit-selected text
var selectedText = -1;
// Make sure the image is loaded first otherwise nothing will draw.

// alert(vartext);

// get the text from the input element
var text =
    {
        text: vartext
        //x: 20,
        //y: y
    };

ctx.font = "16px verdana";
ctx.strokeStyle = $('#selColor').val();
text.width = ctx.measureText(vartext).width;
text.height = 16;
debugger;
ctx.fillText(text.text, 24, 45);

}

////////function init(txtNote) ////////{ //////// alert("New Canvas2 Inside Add Note"); //////// // alert("Inside Submit Click"); //////// var canvas1 = document.getElementById("canvas2"); //////// var ctx1 = canvas1.getContext("2d");

//////// // variables used to get mouse position on the canvas //////// var $canvas1 = $("#canvas2"); //////// var canvasOffset = $canvas1.offset(); //////// var offsetX = canvasOffset.left; //////// var offsetY = canvasOffset.top; //////// var scrollX = $canvas1.scrollLeft(); //////// var scrollY = $canvas1.scrollTop();

//////// // variables to save last mouse position //////// // used to see how far the user dragged the mouse //////// // and then move the text by that distance //////// var startX; //////// var startY;

//////// // an array to hold text objects //////// var texts = [];

//////// // this var will hold the index of the hit-selected text //////// var selectedText = -1; //////// // Make sure the image is loaded first otherwise nothing will draw. //////// var vartext = txtNote; //////// alert(vartext);

//////// //// get the text from the input element //////// //var text = //////// // { //////// // text: vartext //////// // //x: 20, //////// // //y: y //////// // };

//////// texts.push({ //////// text: vartext, //////// x: 20, //////// y: 20 //////// });

//////// //ctx1.font = "16px verdana"; //////// //text.width = ctx1.measureText(vartext).width; //////// //text.height = 16; //////// //alert($('#selColor').val()); //////// //ctx1.fillStyle = $('#selColor').val(); //////// //debugger; //////// //ctx1.fillText(text.text, 20, 20); //////// ctx1.font = "16px verdana"; //////// ctx1.fillStyle = $('#selColor').val(); //////// for (var i = 0; i < texts.length; i++) { //////// var text = texts[i]; //////// text.width = ctx1.measureText(text.text).width; //////// text.height = 16; //////// }

//////// // this var will hold the index of the selected text //////// var selectedText = -1;

//////// // START: draw all texts to the canvas //////// //draw(texts); //////// ctx1.clearRect(0, 0, canvas2.width, canvas2.height); //////// for (var i = 0; i < texts.length; i++) { //////// var text = texts[i]; //////// //alert(text.text); //////// // alert(text.x); //////// // alert(text.y); //////// ctx1.fillText(text.text, text.x, text.y); //////// } //////// // listen for mouse events //////// $("#canvas2").mousedown(function (e) { //////// handleMouseDown(e); //////// }); //////// $("#canvas2").mousemove(function (e) { //////// handleMouseMove(e); //////// }); //////// $("#canvas2").mouseup(function (e) { //////// handleMouseUp(e); //////// }); //////// $("#canvas2").mouseout(function (e) { //////// handleMouseOut(e); //////// });

//////// // handle mousedown events //////// // iterate through texts[] and see if the user //////// // mousedown'ed on one of them //////// // If yes, set the selectedText to the index of that text //////// function handleMouseDown(e) { //////// e.preventDefault(); //////// startX = parseInt(e.clientX - offsetX); //////// startY = parseInt(e.clientY - offsetY);

//////// // Put your mousedown stuff here //////// for (var i = 0; i < texts.length; i++) { //////// if (textHittest(startX, startY, i)) { //////// selectedText = i; //////// // alert(selectedText); //////// } //////// } //////// }

//////// // done dragging //////// function handleMouseUp(e) { //////// e.preventDefault(); //////// selectedText = -1; //////// }

//////// // also done dragging //////// function handleMouseOut(e) { //////// e.preventDefault(); //////// selectedText = -1; //////// }

//////// // handle mousemove events //////// // calc how far the mouse has been dragged since //////// // the last mousemove event and move the selected text //////// // by that distance //////// function handleMouseMove(e) //////// { //////// // alert(selectedText); //////// if (selectedText < 0) { //////// return; //////// } //////// e.preventDefault(); //////// mouseX = parseInt(e.clientX - offsetX); //////// mouseY = parseInt(e.clientY - offsetY);

//////// // Put your mousemove stuff here //////// var dx = mouseX - startX; //////// var dy = mouseY - startY; //////// startX = mouseX; //////// startY = mouseY;

//////// var text = texts[selectedText]; //////// text.x += dx; //////// text.y += dy; //////// //draw(); //////// ctx1.clearRect(0, 0, canvas2.width, canvas2.height); //////// for (var i = 0; i < texts.length; i++) { //////// var text = texts[i]; //////// // alert(text.text); //////// // alert(text.x); //////// // alert(text.y); //////// ctx1.fillText(text.text, text.x, text.y); //////// } //////// }

//////// function textHittest(x, y, textIndex) { //////// var text = texts[textIndex]; //////// return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y); //////// } ////////}

function init() { // canvas related variables

debugger;
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");

// variables used to get mouse position on the canvas
var $canvas = $("#canvas2");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;

// an array to hold text objects
var texts = [];

// this var will hold the index of the hit-selected text
var selectedText = -1;

// clear the canvas & redraw all texts
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < texts.length; i++) {
        var text = texts[i];
        ctx.fillText(text.text, text.x, text.y);
    }
}

alert($("#theText").val());
// calc the y coordinate for this text on the canvas
    var y = texts.length * 20 + 20;

    // get the text from the input element
    var text = {
        text: $("#theText").val(),
        x: 20,
        y: y
    };

    // calc the size of this text for hit-testing purposes
    ctx.font = "16px verdana";
    alert($('#selColor').val())
    ctx.strokeStyle = $('#selColor').val();
    text.width = ctx.measureText(text.text).width;
    text.height = 16;

    // put this new text in the texts array
    texts.push(text);

    // redraw everything
    draw();

// test if x,y is inside the bounding box of texts[textIndex]
    function textHittest(x, y, textIndex) {
        var text = texts[textIndex];
        return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
    }

// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
    function handleMouseDown(e) {
        e.preventDefault();
        startX = parseInt(e.clientX - offsetX);
        startY = parseInt(e.clientY - offsetY);
        // Put your mousedown stuff here
        for (var i = 0; i < texts.length; i++) {
            if (textHittest(startX, startY, i)) {
                selectedText = i;
            }
        }
    }

// done dragging
    function handleMouseUp(e) {
        e.preventDefault();
        selectedText = -1;
    }

// also done dragging
    function handleMouseOut(e) {
        e.preventDefault();
        selectedText = -1;
    }

// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
    function handleMouseMove(e) {
        if (selectedText < 0) {
            return;
        }
        e.preventDefault();
        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);

        // Put your mousemove stuff here
        var dx = mouseX - startX;
        var dy = mouseY - startY;
        startX = mouseX;
        startY = mouseY;

        var text = texts[selectedText];
        text.x += dx;
        text.y += dy;
        draw();
        //ctx.clearRect(0, 0, canvas.width, canvas.height);
        //for (var i = 0; i < texts.length; i++) {
        //    var text = texts[i];
        //    ctx.fillText(text.text, text.x, text.y);
        //}
    }

// listen for mouse events
    $("#canvas2").mousedown(function (e) {
        handleMouseDown(e);
    });
    $("#canvas2").mousemove(function (e) {
        handleMouseMove(e);
    });
    $("#canvas2").mouseup(function (e) {
        handleMouseUp(e);
    });
    $("#canvas2").mouseout(function (e) {
        handleMouseOut(e);
    });

}

vrjgamer commented 3 years ago

Hi @pritammalunjkar, I am not sure how this is related to my repository. Could explain me why you have posted this here?

pritammalunjkar commented 3 years ago

mistaken

On Tue, Sep 1, 2020 at 9:53 PM Vrushabh Jambhulkar notifications@github.com wrote:

Hi @pritammalunjkar https://github.com/pritammalunjkar, I am not sure how this is related to my repository. Could explain me why you have posted this here?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vrjgamer/Custom-Alert-Dialog-Box/issues/2#issuecomment-684976999, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALESSN2ZJTCVGDUHGLXCLBTSDUNWJANCNFSM4QRLD7OQ .

--

Thanks & Regards, Pritam Malunjkar