I am new to Fabricjs, but have been reading the docs, doing the tutorials.
It is a very powerful library. I see places where I can lock objects, but what I want to do is stay on an object I select, and not release it by clicking outside its boundaries. I am building a mobile & touch screen version and using your fingers, you tend to click outside the bounds of an object.
Basically: select an object, be able to edit, apply properties from a palette, and have a release button, so it is not released before the user is done editing it.
You can lock single elements with:
canvas.item(0).selectable = false;
But you still have the problem of losing selection on the object you are trying to edit should you click outside its bounds.
Any help is very appreciated!
If I understand you correctly, you would just need to prevent deselection of object by selecting it back again when it's deselected. This can be done via events in Fabric:
var selectedObject;
canvas.on('object:selected', function(options) {
selectedObject = options.target;
});
canvas.on('selection:cleared', function() {
canvas.setActiveObject(selectedObject);
});
I made a simple example (jsfiddle) to demonstrate this.
Related
I'm currently working on a canvas built with fabric.js.
I have three objects on a canvas:
First, that cannot be selected/resized/replaced
Second ,that behave the same as the first one
And a third one, which can be replaced/selected etc.
My problem is that when I multiselect them (by using my mouse),
they all became capable of resizing/replacing etc.
My question is:
How can I disable grouping them together, so that the first two objects cannot be select?
I have already tried canvas.selection = false - but this option disables the whole canvas.
To disable the ability to click and drag in order to select multiple objects you can simply add a key:value pair in the options of the fabric.Canvas initialization...
let canvas = new fabric.Canvas("some_id_attribute_value",{selection: false});
The specific key value is selection:false and "some_id_attribute_value" is whatever you specified as the id of the canvas element(basic canvas init step).
I was also having this problem, hope this helps!
I don't know if I follow your question but each object has a selectable property.
Perhaps that will help?
selectable :Boolean
When set to false, an object can not be selected
for modification (using either point-click-based or group-based
selection). But events still fire on it.
http://fabricjs.com/docs/fabric.Object.html#selectable
I'm working on a simple AR effect for Facebook in Spark AR studio using JavaScript. I have two 3D objects in the scene and I want to switch between them on button click.
So, for example, I have two buttons, and when I click on the first button I want to show the first 3D object (and hide another one). And vice versa - when I click on the second button I want to show the second 3D object and hide the first one.
I can see some examples of how can I access the object in the scene through the script, but I didn't find yet an example of how to create or use buttons in Spark AR.
Is there any easy "drag-and-drop" way to create a button and assign a function to it (like in Unity)? Or should I create an image of the button on the canvas in the scene, use JavaScript to "find" it, detect if the finger touch was made over this image and trigger a function this way?
There is no easy "drag-and-drop" way to create a button and assign a function to it.
You will need to create an image of the button on the canvas in the scene, use Javascript to "find" it, detect if the finger touch was made over this image and trigger a function this way. Here is example code:
var Scene = require('Scene');
var TouchGestures = require('TouchGestures');
var myBtn = Scene.root.find('button');
TouchGestures.onTap(myBtn).subscribe(function() {
//do stuff here
});
Also do not forget to enable the Tap Gesture in your project capabilities settings.
There is also the Native UI Picker that you can make use of:
https://developers.facebook.com/docs/ar-studio/docs/native-ui
(I'm not sure if this was available at the time the question was posted, I'm new to the game)
This is more "drag-and-drop" in that you don't have to create and place the buttons, just assign textures to fill them in, and then you can write a script to do whatever you want when the user selects a button.
I am attempting to mimic the the functionality one would see using the Waze LiveMap (https://www.waze.com/livemap) in Cesium. When a point is clicked, it is converted to a marker with an icon.
I've attempted a few different things with varying levels of success and I'm at my wits end. Does anyone have a good suggestion as to how I can proceed?
There are a couple different ways of doing this, some high-level and some lower-level. The high-level one is easiest so I'll start there. The Cesium Viewer fires an event called selectedEntityChanged when its own selection changes, and you can wire that up to toggle billboard show flags on and off.
Here's a demo. For this demo, I took the original map pins demo and added some lines of code: I turned off the show flags for all the billboards at the start, I added points to stand in for the now-hidden billboards, and I added the following block of code to toggle the billboard show flags when selected, like this:
var lastSelectedPin;
viewer.selectedEntityChanged.addEventListener(function(newEntity) {
if (lastSelectedPin && lastSelectedPin.billboard) {
lastSelectedPin.billboard.show = false;
}
lastSelectedPin = newEntity;
if (lastSelectedPin && lastSelectedPin.billboard) {
lastSelectedPin.billboard.show = true;
}
});
This uses Cesium Viewer's own selection system, but toggles the billboard show flag to appear when selected and disappear when de-selected.
Alternatively, you can dig into Cesium's lower levels for finer control, but there will be a longer learning curve. The Picking Demo shows off several types of picking operations, including scene.pick, scene.drillPick, and camera.pickEllipsoid, which offer various ways to detect what contents exist at a particular screen location. Often these functions are called in response to mouse movements or clicks, or touch/pointer events, to see what the user is interacting with.
I am working on a web-Based Kalendar Application (multi-user). The Application is nearly ready, but one thing is not so good. I want to give the User the chance, to mark several times at one time. That's why, i made a mousedown-function, on every field, and a mouseup-function as well. That way, I get the first marked field, and the last. All fields in the middle can be calculated by the id!
Now the problem: While I am moving the mouse, the browser marks the text. I want another mouse behavior. I want the mouse to draw a rectangle, so that the user sees, where he started, an so that no text within the document gets marked! This is very important. Do you know, how to solve the problem? I already deactivated the right-Click Menu, an set my own menu, but this is to hard for me :(. I have already searched the web with google, but actually I do not really know, which keywords could help here.
PS: I am using jQuery, maybe it could help in this situation.
Here's a script to disable text selection:
http://www.dynamicdrive.com/dynamicindex9/noselect.htm
If you have jQuery, you can use bind like:
$('#demo').bind('selectstart',function(e) {
e.preventDefault();
});
Here's a JSFiddle:
http://jsfiddle.net/Nk9ec/2/
OK, i found out, what was wrong. Your Code is for IE only. I am using Firefox, and I optimize my Application to Firefox! Well now, i managed disabling selecting text, with that function:
$(document).ready(function() {
$(document)[0].oncontextmenu = function() {return false;}
$('#id').mousedown(function(event) {
checkClk(event);
return false;
});
});
The function checkClk(event) controls the Clicking-Behavior.
Beside I managed to make the mouse-Pointer standart-Pointer with css:
body {
cursor: default;
}
All I need is now, to figure out, how I can draw a rectangle, when I move the mous, holding the left Button clicked. I want the Application look like the operating-System.
If you click and hold the mouse down, there is an Rectangle (like this: http://img21.imageshack.us/i/markiert.png/). Does anyone know, wheather this is possible without making a div, which size depends on the Mouseposition?
Is it possible to use shift and mouse click to select multiple elements on a page using jquery?
I have several divs that i have given a tabindex to so that i can select them and can do things like delete them etc.
I want to be able to select more than 1 by holding down shift and using the mouse to click on each div and am struggling to do this.
Does anyone know how this can be done?
I did something like that some time ago, with jQuery:
$(id).click(function(event){ //Mouse Click+shift event
if(event.shiftKey){
//give some attribute that can indentify the elements of the selection
//example rel='multi-selection' or class='multi-selection'
}
});
Then you should do functions that select this elements and do whatever you need, I used this to drag multiple elements. Example if you want to delete this divs, you can for example:
function deleteMultiSelection(){
$('html').find('div[rel=multi-selection']).each(function(){
$(this).remove();
})
}
$("#button").click(function(){
deleteMultiSelection();
})
Be careful because I didn't test this code.
I have a jQuery plugin that does exactly what you want it is called finderSelect it enables Shift+Click, Ctrl+Click, Ctrl+Click+Drag and Standard Clicking on any element.
It sounds like jQuery UI Selectable is what you're after, you can try it out here.
To stay with OS conventions, they key it uses is Ctrl and not Shift, this isn't an option you can change without changing the jQuery UI code itself. It also has the feature of click and drag over elements to get a rectangular selection as well...if that's of any use.
Sure, if you are willing to do some work :)
Listen for the shift keydown, set a var that you can access from within your click handler functions, if the var is set then add that item, (or their tabindex for your current implementation) to your list of items to operate on when an 'action button' is pressed.
unset the var when you get the shift keyup event.
To be honest, the Ctrl + left click for selecting multiple items is pretty standard UI behaviour and built-in to the jQueryUI Selectable. Did you also know you can left click and drag a focus over multiple items to select them?
However, I can see an advantage in offering the behaviour in question, so how about using left click or drag to select and then left click and drag to also de-select?
It may not be the most efficient way of doing it, but after playing around with the in-built callbacks, I've come up with something that seems to work. Based on the code in your question I've hooked into the in-built callback functions to store what was selected and also handle the selection removal. JavaScript duplicated below but