PabloJs.fw.png

Repository

What Will I Learn?

You will learn dynamically creating svg using pablojs.
You will learn find the coordinates of the mouse pointer.
You will learn about mouseup and mousedown events.
You will learn to draw lines using the line() function.
You will learn to draw paths using the path() function.
You will learn to draw circles using the circle() function.
You will learn to draw rectangles using the rect() function.

Requirements

Difficulty

Basic

Tutorial Contents

In this article, I will show how to dynamically render HTML5 SVG to the screen. I will show you how to use the pablo.js library when doing this.

The pablo.js library provides svg plotting on the screen and allows you to interact with them.
I'll show you a sample application on the subject.

When mouseup and mousedown events are captured, I will draw the selected svg the point where the coordinates of the pointer are.

I will draw lines, circles, rectangles and paths on the screen so I set the steps of the application as drawings of these SVGs.

The first step is to make the necessary adjustments and basically design our page.

Load Pablo.js Jquery and Bootstrap

First you need to download pablojs from this address.

Then you need to include the pablojs file you created with jquery and bootstrap cdn. We also have to add it to our custom script file.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script src="./pablo.js"></script>
    
    <script src="script.js"></script>
    
    <title>Document</title>
</head>

Now we need one area to draw and a panel where we can choose those drawings.

I will use the bootstrap jumbotron for the panel and will select the function to be drawn with the help of buttons.

I will create the area to be drawn with the help of a div but will have to give it some style.

<body>
   <div class="container">
       
        <div class="jumbotron">
            <div class="row">
                
            </div>
            
        </div>
        
        <div id="client">
            
        </div>
   </div>
</body>

If I do so, the drawing area will not be created because I have not made any adjustments to the div.

Let's set the height for the client div and let it show the edges with a line.

<style>
    #client {
        height: 500px;
        border: 1px solid black;
    }
</style>

The reason for not giving the width is because I want to get the width of the area inside the div.

Screenshot 1

Line Drawing Operations

Place a button on the panel to specify for line operations.

<div class="col-md-2">
     <button id="line" class="btn btn-success">Line</button>
</div>

I created a line button using the success class.

Screenshot 2

Html5 svg processing is done in the <svg> tag, so I will upload the svg tag inside <div id = "client">.

I will create one svg in the script file using the Pablo() function.

var svg = Pablo('#client').svg({ //create svg with height and width
        width: 1100,
        height: 500
});

I will set one flag to know which button is clicked. When I click on the Line button I will make flag = 1 so that the end user wants to draw the line.

var flag=0;//set flag zero

$('#line').click(function(){ //when id=line button clicked
        flag=1;//set flag line
});

We can now draw lines according to the mouse coordinates.

We need to know two coordinates to draw a line. start and end points of a line.

With mousedown event we can capture the moment the mouse is clicked and we can capture the moment that the mouseup event is left to be clicked.

So let's take the coordinates of the times when these events happen and assign them to the variables.

We must use the event parameter when creating events to capture screen coordinates.

With clientX and clientY we can find the coordinates of the field.

var x1;//mousedown
var y1;//mousedown
var x2;//mouseup
var y2;//mouseup

$('#client').mousedown(function(event){//when mouse down
        x1=event.clientX-406;//shear rate 406px--x coordinate
        y1=event.clientY-200;//shear rate 200px--y coordinate
});

$('#client').mouseup(function(event){//when mouse up
        x2=event.clientX-406;//shear rate 406px--x coordinate
        y2=event.clientY-200;//shear rate 200px--y coordinate
});

We can draw a line when the mouseup event is caught.

Line drawing is done by line() function. Can be plotted by setting the required attributes by giving the start and end coordinates.

If flag==1, draw the line.

if(flag==1){
     svg.line({x1:x1,x2:x2,y1:y1,y2:y2,stroke:'green'});       
}

Screenshot 3

We can draw more than one line without having to do anything else with the help of these commands.

Screenshot 4

Let's examine the html page after we draw our lines.

Screenshot 5

Multiple <line> tags are placed in one <svg> tag as shown.

Circle Drawing Operations

Is to follow the line steps that need to be made to draw a circle on the screen. With one difference we will not set the start and end points this time.

The center point we need to draw a circle and the length of the radius.

Let's place another button for the circle

<div class="col-md-2">
    <button id="circle" class="btn btn-warning">Circle</button>
</div>

Let's catch the moment of button click and let flag = 2.

$('#circle').click(function(){ //when id=circle button clicked
        flag=2;//set flag circle
});

We use the circle() function to draw to the screen.

If flag == 2, draw a circle with a radius of 50.

if(flag==2){
   svg.circle({cx:x2, cy:y2, r:50, fill:'#ca973b'});
}

Screenshot 6

Rectangle Drawing Operations

We use the rect() function to draw a rectangle on the screen.

It is similar to circle drawing, height and width are set in rectangle drawing.

Create a button for the rectangle.

<div class="col-md-2">
     <button id="rectangle" class="btn btn-danger">Regtangle</button>
</div>

We will set the flag when this button is clicked.

$('#rectangle').click(function(){//when id=rectangle button clicked
        flag=3;//set flag rectangel
    });

Draw rectangle

if(flag==3){
      svg.rect({width:200, height:100,x:x2,y:y2,fill:'#7c1814'})            
}

Screenshot 7

Path Drawing Operations

More than one shape can be drawn with html5 paths. We can get a cubic image after we set the starting and ending places by placing the inside of the cubic.

In this tutorial I will show you how to create a cubic view of a point just near the starting and ending points.

Let x1, y1 and x2,y2 be the points of cx1, cy1 and cx2, cy2 to be create to select points near

var cx1;//for path x1
var cy1;//for path y1
var cx2;//for path x2
var cy2;//for path y2

Place the path button on the index.html page.

<div class="col-md-2">
   <button id="path" class="btn btn-primary">Path</button>
</div>

In the mouseup and mousedown events, we will set the new points we created.

$('#client').mousedown(function(event){//when mouse down
        x1=event.clientX-406;//shear rate 406px--x coordinate
        y1=event.clientY-200;//shear rate 200px--y coordinate
        cx1=x1-100;
        cy1=y1-100;

    });

    $('#client').mouseup(function(event){//when mouse up
        x2=event.clientX-406;//shear rate 406px--x coordinate
        y2=event.clientY-200;//shear rate 200px--y coordinate
        cx2=x2-50;
        cy2=y2-50;
});

We use the path() function to draw the path using pablojs.

We can set the starting point using the M special character.
We can adjust the cubic points using the C special character.
We can set the line points using the L special character.

When you click on the button, draw a path that draws a cubic line.

$('#path').click(function(){//when id=path button clicked
        flag=4;//set flag path
});

In mousedown

if(flag==4){
     svg.path(
      d: 'M '+x2+' '+y2+' C '+cx2+' '+cy2+', '+cx1+' '+cy1+', '+x1+' '+y1+'',
      fill:  'none',
      stroke:'#3c287c',
      'stroke-width': 2,
      'stroke-linecap': 'round'
     });            
}

We can give the stroke attribution the color of the line.
We can give the stroke-width attribution the width of the line.
We can give the stroke-linecap attribution the round of the line

Screenshot 8

Proof of Work Done

https://github.com/onepicesteem/using-html5-svg-dynamically-with-pablo.js

Using Html5 SVG Dynamically with Pablo.js