Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
Creating a Projectile class to calculate height horizontal distance and landing in JavaScript
We need to create a JavaScript class called Projectile that simulates projectile motion physics. This class calculates horizontal distance traveled by a projectile given initial conditions. Problem Statement Create a Projectile class that takes three parameters during initialization: Starting height (h0): 0 ≤ h0 < 200 Starting velocity (v0): 0 < v0 < 200 Launch angle (a): 0° < a < 90°, measured in degrees The class should include a horiz method that calculates horizontal distance traveled at time t. Physics Formula The ...
Read MoreGreatest sum of average of partitions in JavaScript
We are required to write a JavaScript function that takes in an array of numbers, arr, as the first argument, and a number, num, (num ≤ size of arr), as the second argument. Our function should partition the array arr into at most num adjacent (non-empty) groups in such a way that we leave no element behind. From all such partitions, our function should pick that partition where the sum of averages of all the groups is the greatest. Problem Statement Given an array and a maximum number of partitions, find the partition that maximizes the sum ...
Read MoreHow to add dashed stroke to a Circle using FabricJS?
In this tutorial, we are going to learn how to add a dashed stroke to a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. The strokeDashArray property allows us to specify a dash pattern for the object's stroke. Syntax new fabric.Circle({ strokeDashArray: Array }) Parameters options (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, ...
Read MoreHow to set the horizontal scale factor of a Circle using FabricJS?
In this tutorial, we are going to learn how to set the horizontal scale factor of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also set the horizontal scale of a circle object. This can be done by using the scaleX property. Syntax new fabric.Circle({ scaleX : Number }: ...
Read MoreHow to make the controlling corners of a Rectangle transparent using FabricJS?
In this tutorial, we are going to learn how to make the controlling corners of Rectangle transparent using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a Rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas. The transparentCorners property allows us to make the controlling corners of Rectangle transparent. Syntax new fabric.Rect({ transparentCorners: Boolean }: Object) Parameters Options (optional) − This parameter is an Object which provides additional ...
Read MoreHow to set the text overline of IText using FabricJS?
In this tutorial, we are going to learn how to set the text overline of IText using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text. Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as ...
Read MoreFabricJS – How to check if a specified control is visible in Line?
In this article, we are going to learn about how to check if a specified control is visible in Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to check if a specified control is visible in Line object, we use the ...
Read MoreHow to set the position of Image from left using FabricJS?
In this tutorial, we are going to learn how to set the position of Image from left using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to set the position of Image from left, we use the left property. Syntax new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { left: Number }: Object, callback: function) Parameters ...
Read MoreHow to create a dropdown list using JavaScript?
We will learn to create a dropdown list using HTML and JavaScript below. Before starting with the article, let's understand the dropdown list and why we need to use it. The dropdown list gives multiple choices to users and allows them to select one value from all options. However, we can do the same thing using multiple radio buttons, but what if we have hundreds of choices? Then we can use the dropdown menu. When users click the dropdown button, it opens all the choices, and users can select anyone. Also, the dropdown provides a better user experience ...
Read MoreIntroduction to Anime.js
Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works seamlessly with CSS properties, DOM elements, SVG attributes, and JavaScript objects, making it an excellent choice for creating smooth web animations without the complexity of traditional JavaScript animation methods. Traditional JavaScript animations require manually calculating property changes over time, which becomes complex even for simple effects. Anime.js simplifies this process by providing a unified interface for animating multiple properties simultaneously, handling timing calculations, and managing animation states automatically. Key Features Anime.js offers several advantages over vanilla JavaScript animations: Lightweight: Small ...
Read More