How to draw tick on an image using vue js

Create two css class draw to give white background box on which we will draw the check or dot and get the X and Y coordinates.

        .draw{
             background: white;
             width: 20vw;
             height: 20vw;
             border-style: solid;
             margin:auto;
             margin-bottom: 10px;
         }
         .center {
             text-align:center;
         }

Link Vue Js CDN to use Vue framework

Create an instance of Vue and create app id

new Vue({
 el: "#app",

Now create drawDot() and drawCheck() methods to add Check or Dot and create styles.

Here is the final code after combining all above steps:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=!, initial-scale=1.0">
    <title>Draw a check or Dot using Vue JS</title>
    <style>
        .draw{
            background: white;
            width: 20vw;
            height: 20vw;
            border-style: solid;
            margin:auto;
            margin-bottom: 10px;
        }
        .center {
            text-align:center;
        }
    </style>

</head>
<body>

    <div id="app">
         <p class="center"> Draw Check</p>
         <div  class="draw" @click="drawCheck"></div>
         <p class="center"> Draw Dot</p>
         <div class="draw" @click="drawDot"></div>
    </div>
    
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

    <script type="text/javascript">
    new Vue({
     el: "#app",
    
     methods:{

            drawDot(){
                mouseX = event.pageX;
                mouseY = event.pageY
                console.log(mouseX + ' ' + mouseY);
                let div = document.createElement("div");  
                div.style.position ='absolute';
                div.style.top = mouseY + 'px';
                div.style.left = mouseX + 'px';
                div.style.width = '5px';
                div.style.height = '5px';
                div.style.backgroundColor = '#78b13f';
                document.body.appendChild(div)
            },

            drawCheck(){
                mouseX = event.pageX;
                mouseY = event.pageY
                console.log(mouseX + ' ' + mouseY);
                let div = document.createElement("div");
                div.style.position ='absolute';  
                div.style.transform ='rotate(45deg)';
                div.style.height = '20px';
                div.style.width ='10px';
                div.style.margin = 'auto'; 
                div.style.borderBottom = '5px solid #78b13f';
                div.style.borderRight ='5px solid #78b13f';
                div.style.top=mouseY + 'px';
                div.style.left=mouseX + 'px';
                document.body.appendChild(div)
            }
            
        }
    });
    </script>
</body>
</html>

Leave a Comment

Your email address will not be published. Required fields are marked *