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
Related
I'm writing a WPF applicating, in C#, using ArcObjects.
I have an ESRI.ArcGIS.Controls.AxMapControl on my form, and I'm trying to draw some graphics elements on top of it.
The map I'm developing with is a customer-provided mdf of the state of Georgia.
I'm trying an example I found here: How to interact with map elements.
public void AddTextElement(IMap map, double x, double y)
{
IGraphicsContainer graphicsContainer = map as IGraphicsContainer;
IElement element = new TextElementClass();
ITextElement textElement = element as ITextElement;
//Create a point as the shape of the element.
IPoint point = new PointClass();
point.X = x;
point.Y = y;
element.Geometry = point;
textElement.Text = "Hello World";
graphicsContainer.AddElement(element, 0);
//Flag the new text to invalidate.
IActiveView activeView = map as IActiveView;
activeView.PartialRefresh(esriViewDrawPhase.esriViewGraphics, null, null);
}
It took while to figure out how to project the lat/long of Atlanta to the coordinate system of the map, but I'm pretty sure that I've got it right. The x/y values I'm passing into AddTextElement() are clearly within the Atlanta area, according to the Location data I see when I use the Identify tool on the map.
But I'm not seeing the text. Everything seems to be working correctly, but I'm not seeing the text.
I can see a number of possibilities:
The layer I'm adding the TextElement to isn't visible, or doesn't exist.
I need to apply a spatial reference system to the point I'm setting as the TextElement's geometry
The text is drawing fine, but there's something wrong with the font - it's invisibly small, or in a transparent color, etc.
Haven't a clue, which.
I was hoping there was something obvious I was missing.
===
As I've continued to play with this, since my original posting, I've discovered that the problem is the scaling - the text is showing up where it should, only unreadably small.
This is what Rich Wawrzonek had suggested.
If I set a TextSymbol class, with a specified Size, the size does apply, and I see me text larger or smaller. Unfortunately, the text still resizes as the map zooms in and out, and my trying to set ScaleText = false doesn't fix it.
My latest attempt:
public void AddTextElement(IMap map, double x, double y, string text)
{
var textElement = new TextElementClass
{
Geometry = new PointClass() { X = x, Y = y },
Text = text,
ScaleText = false,
Symbol = new TextSymbolClass {Size = 25000}
};
(map as IGraphicsContainer)?.AddElement(textElement, 0);
(map as IActiveView)?.PartialRefresh(esriViewDrawPhase.esriViewGraphics, null, null);
}
I recognize that the above is organized very differently than the way is usually done with ESRI sample code. I find the way ESRI does it to be every difficult to read, but switch from one to another is pretty mechanical.
This is the same function, organized in a more traditional manner. The behavior should be identical, and I'm seeing exactly the same behavior - the text is drawn to a specified size, but scales as the map zooms.
public void AddTextElement(IMap map, double x, double y, string text)
{
IPoint point = new PointClass();
point.X = x;
point.Y = y;
ITextSymbol textSymbol = new TextSymbolClass();
textSymbol.Size = 25000;
var textElement = new TextElementClass();
textElement.Geometry = point;
textElement.Text = text;
textElement.ScaleText = false;
textElement.Symbol = textSymbol;
var iGraphicsContainer = map as IGraphicsContainer;
Debug.Assert(iGraphicsContainer != null, "iGraphicsContainer != null");
iGraphicsContainer.AddElement(textElement, 0);
var iActiveView = (map as IActiveView);
Debug.Assert(iActiveView != null, "iActiveView != null");
iActiveView.PartialRefresh(esriViewDrawPhase.esriViewGraphics, null, null);
}
Any ideas as to why ScaleText is being ignored?
You are only setting the geometry and the text of the text element. You also need to set the Symbol and ScaleText properties. The ScaleText property boolean will determine whether or not it scales with the map. The Symbol property needs to be created and set via the ITextSymbol interface.
See here for an example by Esri.
I implemented drag and drop of images and now i want to constrain proportions of images while resizing.
/**
* Variable: constrainChildrenOnResize
*
* Specifies if children should be constrained according to the <constrainChildren>
* switch if cells are resized (including via <foldCells>). Default is false for
* backwards compatiblity.
*/
mxGraph.prototype.constrainChildrenOnResize = false;
i set this to true but its not working :s
What API/property i need for this functionality..
constrainChildrenOnResize is responsible for positioning and size of the children of resized cell. It means that children should keep their position relatively to the parent-cell.
In your case I would suggest to extend mxVertexHandler using union method. In this example you can see how to implement min-width/min-height restrictions. Using this example you are able to write your own rules for constrain.
Here is my simple solution:
var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function (bounds) {
var result = vertexHandlerUnion.apply(this, arguments);
var coff = bounds.width / bounds.height
result.width = result.height * coff;
return result;
};
So this function is called every time you move mouse during dragging the resizer.
bounds - object, always same and represent old geometry of the cell (before resizing)
result - object, represents new values, which are going to be applied. Between this line ad return statement you can place any code you need to modify result.
In my simple example I just get the initial relation between width and height of the cell (coff) and then set new width by multiplying coff and new height. It will work if you drag corner or top/bottom. In real project this logic should be slightly extended, or you should make visible only corner handlers.
By the way, this code will work for all resizable cells on your graph. If you want to apply it only to images or some other kind of cells - you can put condition and check the cell type before recalculating. You can get current cell or its state via this.state.cell or this.state inside of union function.
For example only for vertecies:
... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
//calculations here
}
return result;
the rect should be alpha=0.1 once the circle touches the rect . but if statement not working . it becomes 0.1 opacity without hitting
/* js
var circle = new lib.mycircle();
stage.addChild(circle);
var rect = new lib.myrect();
stage.addChild(rect);
rect.x=200;
rect.y=300;
circle.addEventListener('mousedown', downF);
function downF(e) {
stage.addEventListener('stagemousemove', moveF);
stage.addEventListener('stagemouseup', upF);
};
function upF(e) {
stage.removeAllEventListeners();
}
function moveF(e) {
circle.x = stage.mouseX;
circle.y = stage.mouseY;
}
if(circle.hitTest(rect))
{
rect.alpha = 0.1;
}
stage.update();
*/
The way you have used hitTest is incorrect. The hitTest method does not check object to object. It takes an x and y coordinate, and determines if that point in its own coordinate system has a filled pixel.
I modified your example to make it more correct, though it doesn't actually do what you are expecting:
circle.addEventListener('pressmove', moveF);
function moveF(e) {
circle.x = stage.mouseX;
circle.y = stage.mouseY;
if (rect.hitTest(circle.x, circle.y)) {
rect.alpha = 0.1;
} else {
rect.alpha = 1;
}
stage.update();
}
Key points:
Reintroduced the pressmove. It works fine.
Moved the circle update above the hitTest check. Otherwise you are checking where it was last time
Moved the stage update to last. It should be the last thing you update. Note however that you can remove it completely, because you have a Ticker listener on the stage in your HTML file, which constantly updates the stage.
Added the else statement to turn the alpha back to 1 if the hitTest fails.
Then, the most important point is that I changed the hitTest to be on the rectangle instead. This essentially says: "Is there a filled pixel at the supplied x and y position inside the rectangle?" Since the rectangle bounds are -49.4, -37.9, 99, 76, this will be true when the circle's coordinates are within those ranges - which is just when it is at the top left of the canvas. If you replace your code with mine, you can see this behaviour.
So, to get it working more like you want, you can do a few things.
Transform your coordinates. Use localToGlobal, or just cheat and use localToLocal. This takes [0,0] in the circle, and converts that coordinate to the rectangle's coordinate space.
Example:
var p = rect.localToLocal(0, 0, circle);
if (rect.hitTest(p.x, p.y)) {
rect.alpha = 0.1;
} else {
rect.alpha = 1;
}
Don't use hitTest. Use getObjectsUnderPoint, pass the circle's x/y coordinate, and check if the rectangle is in the returned list.
Hope that helps. As I mentioned in a comment above, you can not do full shape collision, just point collision (a single point on an object).
I have a graph with nodes and edges and I want to display them.
Isn't there any function which, given this graph, displays it without me to give exact coordinates?
yes, you can use the auto layout
http://jgraph.github.io/mxgraph/docs/js-api/files/layout/mxCompactTreeLayout-js.html
this url construct a compact tree layout.
var layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell) {
return layout;
};
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.