Can Fabric JS allow for grouping all objects on the canvas with a click event?
Can Fabric JS allow for grouping all objects on the canvas with a click event?
Absolutely! You can group all the canvas objects with a simple click event. Check out this example where I demonstrate creating three objects and grouping them upon clicking.
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';
//create circle object
var circle = new fabric.Circle({
radius: 20,
fill: 'red',
left: 100,
top: 100
});
canvas.add(circle);
//create square object
var square = new fabric.Rect({
left: 130,
top: 140,
fill: 'green',
width: 40,
height: 80
});
canvas.add(square);
canvas.renderAll();
$('#groupthem').on('click', function(event) {
groupthem();
});
var site_url = 'http://fabricjs.com/assets/1.svg';
fabric.loadSVGFromURL(site_url, function(objects) {
var group = new fabric.PathGroup(objects, {
left: 165,
top: 100,
width: 295,
height: 211
});
canvas.add(group);
canvas.renderAll();
});
function groupthem (){
var objs = [];
//get all the objects into an array
objs = canvas._objects.filter(function(obj){
return obj;
});
//group all the objects
var alltogetherObj = new fabric.Group(objs,{
top:200,left:250,
originX:'center',
originY:'center'});
//clear previous objects
canvas._objects.forEach(function(obj){
obj.remove();
});
canvas.add(alltogetherObj);
alltogether.setCoords();
canvas.renderAll();
}
live jsfiddle : http://jsfiddle.net/tornado1979/y6fqj8go/
https://i.sstatic.net/zkbtW.png
hope helps, good luck.
New updated fiddler link:http://jsfiddle.net/yogeshwari/sezxhqc4/1/
// Setting up the configuration for serving files from the source directory var express = require('express'); // Importing express module var path = require('path'); // Importing path module var open = require('open'); // Imp ...
I've been encountering an issue while trying to run the JavaScript client for the Tumblr API from their Github repository. The error message I keep getting is "require not defined" which has led me on a hunt across various forums and websites, includi ...
I have a custom listbox feature, where a div holds a vertical list of other div elements. There is also an input field for searching within the list. While it works fine with small data sets, it becomes extremely slow with large amounts of data. In additi ...
I have a collection of objects grouped together in Object3D and I'm attempting to detect when they are clicked on. My scene has dimensions of 600x400, my camera is part of a three-object, and the code for handling events looks like this: function onD ...
I am encountering a problem with my project in which an environment variable is being revealed to the browser. Despite the documentation stating that only environment variables prefixed with NEXT_PUBLIC_ should be accessible in the browser environment, all ...
I have been searching for a solution to this issue and even referred to the example provided on the Vue Router documentation, but I am still encountering difficulties. My goal is to make an HTTP call when a component loads initially, then monitor the route ...
I encountered an issue with the Google Drive API in my application. Even after deleting files from Google Drive, the listfiles function still returns those deleted files. Is there a solution to prevent this from happening? Below is the function of my API: ...
Encountering a peculiar issue with Typescript while attempting to instantiate a new Date object. <template> <div> Testing Date</div> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ name: ...
Currently, I am working on a JavaScript code that will simply display the name of the browser being used to view the web page. Despite me using Safari, none of the navigators seem to recognize it as the current browser. The information displayed in my brow ...
Thank you for taking the time. Now, let's dive into the main topic: I have a scenario where I need to execute one of two functions based on a boolean value at the start. The decision is made using window.onload. This code works perfectly on desktop b ...
Currently, I am developing a function that involves an HTML template. The purpose of this function is to generate a dynamic template and convert it into a PDF. So far, I have been able to achieve this using the following code: var output = ''; ...
I am having trouble appending an object to FormData using Axios. I do not want to send data by JSON.stringify() data () { return { product: { title: '', description: '', properties: { ...
I have a single page with a list menu By utilizing the list menu, I am able to generate various types of charts such as line chart, bar chart, pie chart, and more. However, I would like the previously selected charts, like the line chart, pie chart, etc. ...
Currently, I am exploring a method to include a custom class when the user selects the blockquote toolbar button. When the blockquote is clicked, it generates the following element: <blockquote class="ql-align-justify">this is my quoted tex ...
Can you identify which code block does not contain a syntax error? Out of the 4 options below, one of them is free from any syntax mistakes. alert("hello "+3+" times); alert("hello "+3 times); alert("hello +3+ times"); alert("hel ...
The Nav.jsx component code provided is working as intended. In this implementation, clicking the 'Sign Out' button will redirect the application to http://localhost:3000. 'use client' import { signOut } from 'next-auth/react&apos ...
useEffect(() => { console.log('applying filter'); const updatedFilters = { status: { values: { label: router.query.status, value: router.query.status }, }, // Add additional filter properties here... }; ...
Is there a way to correctly detect the last child after rearranging divs using flex order? Even though I have set the order in the CSS, it is still recognizing the last child based on the DOM tree. Since the items are dynamic, we can't rely on nth-chi ...
Is there a way to pass values to children components in Vue when using the component tag? It appears that I am unable to pass values to a child component using the component tag without using v-if: <component :is="showNow"></component> ...
I've been working on creating a logging system in NodeJS with a MySQL database. To establish the connection, I use the following code: const con = mysql.createConnection({ host : 'localhost', user : 'dbuser', passwor ...