I initialize Cytoscape with something that looks like the following:
var cy = cytoscape({
container: $('#my-element'),
height: 500px
});
I would like to change the height of the container element to something other than the original 500px value when an user commits an action.
How would I do this with Cytoscape? There is a height() method in the main Cytoscape object, but this only functions as a getter.
There is a documented method cy.resize() that you can call to redraw the graph to fit within the context of the current container's height / width. You won't however get the desired results just by calling this method. You'll also have to call the cy.fit() function afterwards to get the new graph view you want.
So your function to resize the container should look something like this:
function resizeContainer(newContainerHeight){
$('#my-element').css('height', newContainerHeight);
cy.resize();
cy.fit();
}
Related
Is there a way to make a graphics element global, in p5js? Right now I want to make the ellipse be global:
var bug = ellipse(0, random(height), 20, 20);
function setup() {
createCanvas(500, 500);
background(100);
}
function draw() {
}
I want to store the ellipse in a variable. But there's an error saying that "mySketch.js, line 1:Uncaught ReferenceError: ellipse is not defined". Can someone help? Thanks.
The ellipse() function draws an ellipse, but it doesn't return anything, so you can't store the result of calling it in a variable.
I'm not totally sure what you're trying to do, but you have a couple options worth exploring:
You could store all of the values for your ellipse in variables like ellipseX, ellipseY, and ellipseSize.
You could create a class that stores the values you want. Shameless self-promotion: here is a tutorial on creating classes in p5.js.
You could draw the ellipse to a p5.Graphics and then store that p5.Graphics in a global variable. You can find more info about this in the reference.
I am trying to delete canvas. For that I have used below 2lines of code
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);**
This is just clearling the canvas, but on click on that canvas its reshowing same data.
The canvas is not deleted, but temporary hidden on clear.
Konva is a scene graph for your canvas. The scene has nodes, such as Layer, Group, Shape.
You don't need to clear the canvas element manually. You just need to destroy all nodes from the scene. Like this:
layer.destroyChildren();
layer.draw();
I tried this too.Thats also not working.
I tried below code and thats working fine.
**var stage_main = this.$refs.stage.getStage();
stage_main.clear();
Object.keys(this.canvasElements).forEach((key) => {
this.canvasElements[key]= [];
});**
I also need to clear canvaselement object along with stage clear
In this example:
var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 100, 100);
stage.addChild(rect);
}
function drawShapes(){
drawRectangle();
stage.update();
}
drawShapes();
// Why does this call log null?
console.log(stage.getBounds());
<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script>
<canvas id="testCanvas" width="600" height="150"></canvas>
stage.getBounds(); is returning null. Why does it return null? According to the docs, it's supposed to return a rectangle object representing the dimensions of the bounding box of the stage.
If this usage is incorrect, what is the correct usage to get the dimensions of the object?
It looks like the stage object can't calculate their own bounds.
In the same getBounds() documentation it appears the following:
Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds.
If it's the case, as the documentation says, you can use the setBounds() method (documentation) to set manually the bounds of the object:
setBounds(x,y,width,height)
In the case of your code:
stage.setBounds(0,0,600,150); // (0,0), at the same size of the canvas
My objective is to build a Dojo widget that embeds some graphic information, for example an Analogue Gauge, along with some other stuff.
I have managed to build a widget and initialise the Analogue widget with code such as:
gauge = new dojox.widget.AnalogGauge({
id: "defaultGauge",
width: 300,
height: 200,
cx: 150,
cy: 175,
radius: 125,
Now I've generalised this so that the width, height, cx, cy and radius can be calculated if I know the dimensions in which the widget will be rendered. Say for example, it's going to be in the "top" region of a Border Layout of height 150px, then I can compute suitable values.
The question: how do I determine the available space for my widget to work in? Is there some API by which I can obtain this information from the Layout or Content Pane?
It seems that the widget can provide a
resize(dimensions)
method, which is called both when the widget is first displayed and also when it is resized. The argument being an object holding the width and height of the display area.
Hence if the
gauge = new dojox.widget.AnalogGauge({
code is moved into the resize method we can provide suitable size information to the gauge constructor. I have yet to understand how to deal with subsequent resize() requests.
I'm working with dojox.drawing.Drawing to create a simple diagramming tool. I have created a custom tool to draw rounded rectangle by extending dojox.drawing.tools.Rect as shown below -
dojo.provide("dojox.drawing.tools.custom.RoundedRect");
dojo.require("dojox.drawing.tools.Rect");
dojox.drawing.tools.custom.RoundedRect = dojox.drawing.util.oo.declare(
dojox.drawing.tools.Rect,
function(options){
},
{
customType:"roundedrect"
}
);
dojox.drawing.tools.custom.RoundedRect.setup = {
name:"dojox.drawing.tools.custom.RoundedRect",
tooltip:"Rounded Rect",
iconClass:"iconRounded"
};
dojox.drawing.register(dojox.drawing.tools.custom.RoundedRect.setup, "tool");
I was able to add my tool to the toolbar and use it to draw a rectagle on canvas. Now, I would like to customize the rectangle created by my custom tool to have rounded corners, but I'm not able to figure out how.
I have checked the source of dojox.drawing.tools.Rect class as well as it's parent dojox.drawing.stencil.Rect class and I can see the actual rectangle being created in dojox.drawing.stencil.Rect as follows -
_create: function(/*String*/shp, /*StencilData*/d, /*Object*/sty){
// summary:
// Creates a dojox.gfx.shape based on passed arguments.
// Can be called many times by implementation to create
// multiple shapes in one stencil.
//
//console.log("render rect", d)
//console.log("rect sty:", sty)
this.remove(this[shp]);
this[shp] = this.container.createRect(d)
.setStroke(sty)
.setFill(sty.fill);
this._setNodeAtts(this[shp]);
}
In dojox.gfx, rounded corners can be added to a a rectangle by setting r property.
With this context, could anybody please provide answers to my following questions?
What's the mechanism in dojox.drawing to customize the appearance of rectangle to have
rounded corners?
In the code snippet above, StencilData is passed to createRect call. What's the mechanism to customize this data? Can the r property of a rectangle that governs rounded corners be set in this data?
Adding rounded rectangles programmatically is easy. In the tests folder you'll find test_shadows.html which has a line that adds a rectangle with rounded corners:
myDrawing.addStencil("rect", {data:{x:50, y:175, width:100, height:50, r:10}});
You create a data object with x,y,width,height, and a value for r (otherwise it defaults to 0).
If you wanted to do it by extending rect, the easiest way to do it would just be to set the value in the constructor function (data.r=10, for example), or you could create a pointsToData function to override Rect's version. Either you would have set the value for this.data.r, or the default:
pointsToData: function(/*Array*/p){
// summary:
// Converts points to data
p = p || this.points;
var s = p[0];
var e = p[2];
this.data = {
x: s.x,
y: s.y,
width: e.x-s.x,
height: e.y-s.y,
r:this.data.r || 10
};
return this.data;
},
In that example I give r the value 10 as the default, instead of 0 as it was before. This works because every time stencil goes to draw your rect, it converts canvas x,y points (all stencils remember their points) to data (which gfx uses to draw). In other words this function will always be called before rect renders.