How To Draw Rectangles Of Certain Dimensions In Arcmap

Depict a rectangle on Sail using React

Many developers in ReactJS struggle with the cartoon element on sheet therefore we have come up with the new article where we show you how to draw a rectangle on Sail using React.

Steps to draw a rectangle on Sheet

Create a react application
Add the sheet and initialize the context
Office to describe a rectangle
Role to describe a rectangle with background
Describe rectangles
Output

1. Create a react awarding

In the first footstep, nosotros'll create a react application using create-react-app. If yous don't know how to implement a react application so refer to this link.

2. Add the canvas and initialize the context

Let's render the canvas element in the DOM and initialize the context of the canvass.

vii

ten

fourteen

import React , { useRef , useEffect } from 'react' ;

function App ( ) {

const canvas = useRef ( ) ;

let ctx = null ;

// initialize the canvass context

useEffect ( ( ) => {

// dynamically assign the width and height to canvas

const canvasEle = canvass . current ;

canvasEle . width = canvasEle . clientWidth ;

canvasEle . height = canvasEle . clientHeight ;

// get context of the sheet

ctx = canvasEle . getContext ( "2nd" ) ;

} , [ ] ) ;

return (

< div className="App" >

< h3 > Draw a rectangle on Canvas - < a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer" > Clue Mediator </a > </h3 >

< canvass ref={ canvass } > </canvas >

</div >

) ;

}

export default App ;

Here we have used the useRef and useEffect hooks to manage the canvas element. Check out the more example of the React Hooks.

You can likewise see that we accept ready the width and meridian of the sheet and initialize the context for further use.

Apply the following style to design a canvass.

. App {

margin : 30px ;

}

canvas {

width : 400px ;

top : 300px ;

background-color : #f5f5f5;

border : 1px solid #ccc;

border-radius : 4px ;

}

three. Function to draw a rectangle

Now we'll write a function to depict a rectangle on Canvas using react code.

// draw rectangle

const drawRect = ( info , style = { } ) => {

const { x , y , w , h } = info ;

const { borderColor = 'black' , borderWidth = 1 } = fashion ;

ctx . beginPath ( ) ;

ctx . strokeStyle = borderColor ;

ctx . lineWidth = borderWidth ;

ctx . rect ( x , y , due west , h ) ;

ctx . stroke ( ) ;

}

In the in a higher place code, nosotros are treatment two different parameters such every bit info and style to draw a rectangle using the rect method.

We'll utilize the 10, y, w as width and h equally height from the info. We will also use the borderColor and borderWidth from the manner to decorate the rectangle.

4. Function to draw a rectangle with background

Let'due south write one more than function to describe a rectangle with background color.

// draw rectangle with background

const drawFillRect = ( info , manner = { } ) => {

const { ten , y , w , h } = info ;

const { backgroundColor = 'black' } = way ;

ctx . beginPath ( ) ;

ctx . fillStyle = backgroundColor ;

ctx . fillRect ( ten , y , w , h ) ;

}

Same as the previous office, nosotros volition use the two dissimilar parameters info and style. But here we will use the fillRect method to describe a filled rectangle.

5. Draw rectangles

We'll utilise the above two functions to describe rectangles on page load.

useEffect ( ( ) => {

const r1Info = { x : 20 , y : xxx , westward : 100 , h : 50 } ;

const r1Style = { borderColor : 'blood-red' , borderWidth : x } ;

drawRect ( r1Info , r1Style ) ;

const r2Info = { x : 100 , y : 100 , westward : 80 , h : 150 } ;

drawRect ( r2Info ) ;

const r3Info = { x : 250 , y : 80 , w : 80 , h : 120 } ;

drawFillRect ( r3Info , { backgroundColor : 'light-green' } ) ;

const r4Info = { ten : 200 , y : 220 , due west : 100 , h : fifty } ;

drawFillRect ( r4Info ) ;

} , [ ] ) ;

vi. Output

Let's combine all code together and run into how it looks.

App.js

one

two

five

xiv

xxx

forty

import React , { useRef , useEffect } from 'react' ;

office App ( ) {

const canvas = useRef ( ) ;

permit ctx = nix ;

// initialize the canvas context

useEffect ( ( ) => {

// dynamically assign the width and height to sail

const canvasEle = canvas . current ;

canvasEle . width = canvasEle . clientWidth ;

canvasEle . height = canvasEle . clientHeight ;

// get context of the canvas

ctx = canvasEle . getContext ( "second" ) ;

} , [ ] ) ;

useEffect ( ( ) => {

const r1Info = { 10 : xx , y : 30 , westward : 100 , h : 50 } ;

const r1Style = { borderColor : 'red' , borderWidth : 10 } ;

drawRect ( r1Info , r1Style ) ;

const r2Info = { x : 100 , y : 100 , due west : lxxx , h : 150 } ;

drawRect ( r2Info ) ;

const r3Info = { x : 250 , y : 80 , w : lxxx , h : 120 } ;

drawFillRect ( r3Info , { backgroundColor : 'green' } ) ;

const r4Info = { x : 200 , y : 220 , w : 100 , h : 50 } ;

drawFillRect ( r4Info ) ;

} , [ ] ) ;

// describe rectangle

const drawRect = ( info , style = { } ) => {

const { 10 , y , westward , h } = info ;

const { borderColor = 'black' , borderWidth = one } = style ;

ctx . beginPath ( ) ;

ctx . strokeStyle = borderColor ;

ctx . lineWidth = borderWidth ;

ctx . rect ( ten , y , w , h ) ;

ctx . stroke ( ) ;

}

// draw rectangle with background

const drawFillRect = ( info , style = { } ) => {

const { x , y , w , h } = info ;

const { backgroundColor = 'blackness' } = style ;

ctx . beginPath ( ) ;

ctx . fillStyle = backgroundColor ;

ctx . fillRect ( x , y , w , h ) ;

}

render (

< div className="App" >

< h3 > Describe a rectangle on Canvas - < a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer" > Inkling Mediator </a > </h3 >