How to set background image attribute for a rectangle in my JointJs application ?
Rectangle object doesn't have that attribute perse....what you can do it's create an image object itself:
var image = new joint.shapes.basic.Image({
position : {
x : 50,
y : 40
},
size : {
width : 16,
height : 16
},
attrs : {
image : {
"xlink:href" : "images/background.png",
width : 16,
height : 16
}
}
});
graph.addCell(image);
Then you can play as you need with the attrs of it, you can even create ports and set arrows later if you wish to do diagrams. Other way it's to create a rectangle object and then create this image object above as a cover (in case you need specific attrs from rectangle to code).Tell me how it goes.
Related
I'd like to set an image of a map - or, better yet, a generated map - on the x-z plane of a high-charts graph. Is there a way to do this with background image? I understand you can set the color of the back, bottom, and side frame, is there any way to set images for those frames?
You can use SVG <pattern> element with <image> added inside of it, and set the chart.options3d.frame.bottom.color equal to this pattern, just like that:
First you need to create new pattern basing on current dimensions of mentioned frame. The best place to implement it, should be the chart.events.load function:
chart: {
events: {
load() {
var chart = this
var frameBottomDim = chart.frameShapes.bottom.element.getBBox()
var defs = document.querySelectorAll('defs')[0]
var pattern = chart.renderer.createElement('pattern')
var img = chart.renderer.createElement('image')
pattern.attr({
"patternUnits": "userSpaceOnUse",
"x": frameBottomDim.x,
"y": frameBottomDim.y,
"width": frameBottomDim.width,
"height": frameBottomDim.height,
"id": "frameBg",
})
img.attr({
"href": "https://static.makeuseof.com/wp-content/uploads/2010/03/clouds-1-670x335.jpg",
"width": frameBottomDim.width,
"height": frameBottomDim.height,
preserveAspectRatio: 'none'
})
img.add(pattern)
pattern.add(this.renderer.defs)
}
}
}
Then set the frame color property to url(#[pattern_name]):
options3d: {
enabled: true,
alpha: 10,
beta: 20,
depth: 400,
frame: {
bottom: {
color: 'url(#frameBg)'
}
}
}
Live example: https://jsfiddle.net/h8tv4xpg/
Web API Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
I want to add icon to a cesium map intead drawing a point.
Currently I doing the below code, but want to replace the point below with an actual icon. I have been looking through the cesium documentation and cannot find anything that will do this. Thanks for any suggestions
var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());
points.add({
position : new Cesium.Cartesian3.fromDegrees(longitude, latitude),
color : colorDot,
outlineColor : Cesium.Color.WHITE,
outlineWidth : width
});
In Cesium, this is called a billboard. They are created in basically the same way as a point, except the image is generally loaded from a URL.
https://cesiumjs.org/Cesium/Build/Documentation/BillboardCollection.html
// Create a billboard collection with two billboards
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
image : 'url/to/image'
});
billboards.add({
position : new Cesium.Cartesian3(4.0, 5.0, 6.0),
image : 'url/to/another/image'
});
Adding to #paraquat's correct answer about Billboards: Cesium includes a "Pin Builder" that can be used to make typical map icons as billboards. Here's a demo.
var viewer = new Cesium.Viewer('cesiumContainer');
var pinBuilder = new Cesium.PinBuilder();
var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png');
var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) {
return viewer.entities.add({
name : 'Grocery store',
position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
billboard : {
image : canvas.toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
});
I define a drawing panel and some components which are connected each other with SVG paths. I need to redraw connection paths on surface when moving components.
there is my drawing panel
{
xtype : 'panel',
flex : 5,
split : true,
region : 'center',
plain : true,
itemId : 'idCenterRegion',
id : 'centerRegion',
border : 1,
layout : {
type : 'fit',
},
defaults : {
autoScroll : true
},
listeners : {
afterrender : 'setDDTarget'
},
items: [{
xtype : 'draw',
itemId : 'idDrawPanel',
renderTo:Ext.getCmp('centerRegion'),
}]
}
The floating windows are adding to centerregion with draw/drop. there is another controller to draw sprites on surface,
printPath : function(drawItem) {
var source=drawItem.source;
var target=drawItem.target;
var surface = Ext.getCmp('centerRegion').down('draw')
.getSurface('main');
var color = "#000";
var line1,line2;
var posSource=[];
var posTarget=[];
if(source.left<target.left){
posSource[0]=source.left+source.width;
posTarget[0]=target.left;
line1=15;
line2=-15;
}else{
posSource[0]=source.left;
posTarget[0]=target.left+target.width;
line1=-15;
line2=15;
}
posSource[1]=source.top+source.height/2;
posTarget[1]=target.top+target.height/2;
var path = [ "M", posSource[0],
posSource[1], "H",
posSource[0] + line1, "L",
posTarget[0] + line2, posTarget[1], "H",
posTarget[0] ].join(",");
surface.add({
type : 'path',
path : path,
stroke : color,
fill : 'none',
'stroke-width' : 2,
surface : surface,
}).show(true);
},
When connecting any items on this panel it draws sprites but not showing on browser. but if I re-size drawing panel or browser window, sprites are shown,
I couldn't find any reason why its happening.
should I refresh view by using a different way?
That is the result before re-sizing screen, but add sprite method completed successfully.
This screenshot is after re-size height of center region, as you see, sprite is visible now. But any event didn't fire manually on re-size action.
I solved the problem,
It looks like a trick but draw container is working well now.
I called manually draw container's resizeHandler on draw container's 'add' listener.
It fires only one time when adding child windows on centerRegion (at first adding).
There is my solution below, firstly give an 'add listener reference to draw container:
{
xtype : 'draw',
itemId : 'idDrawPanel',
renderTo:Ext.getCmp('centerRegion'),
listeners : {
add: 'addToDrawPanel'
},
}
function:
addToDrawPanel:function( d, component, index, eOpts ){
var s=d.getSize();
var rh= d.getResizeHandler();
rh.call(d,s);
}
I'm trying to get the shape properties to dynamically update when the shape is being scaled.
Here's a fiddle: http://jsfiddle.net/anirudhrantsandraves/DAjrp/
The console log commands:
console.log('Width = '+scaledObject.currentWidth);
console.log('Height = '+scaledObject.currentHeight);
are supposed to dynamically display the height and width of the shape as it is being scaled.
The properties remain the same in the console when the shape gets scaled. However, when I select the object again and scale it, the previous values of the properties are displayed.
Is there a way to make this dynamic?
getWidth() and getHeight() are used to get the current width and height in Fabric.js.
So in "object:scaling" event:
canvas.on('object:scaling', onObjectScaled);
function onObjectScaled(e)
{
var scaledObject = e.target;
console.log('Width = '+scaledObject.getWidth());
console.log('Height = '+scaledObject.getHeight());
}
will serve your purpose.
Updated fiddle — http://jsfiddle.net/DAjrp/2/
Just in case, if you wanted to get the scaled height
canvas.on("object:scaling", (e) => {
canvas.getActiveObjects().forEach((o) => {
// if it's scaled then just multiple the height by scaler
const objHeight = o.scaleY ? o.height * o.scaleY : o.height;
// ...
});
});
I am trying to transitionTo a group and it does it, but I can see the transition only when something else forces stage to be drawn. Transition itself doesn’t update the canvas while it’s going. There are 4 Kinetic.Image's and 4 Kinetic.Text's inside the group. Any idea how to get it working?
Let's say #score group x: 1000
var points = self.stage.get('#scoreGroup')[0];
points.transitionTo({
x: 800,
duration: 5
});
I'm afraid more code would be needed to actually tell what might be missing, but my guess is that you added the elements to the group, which was already in a layer, which was already on the stage. Your transitionTo is being rendered in the buffer, but because the elements were never "drawn" on the stage, the animation isn't being translated to the viewable stage. Perhaps if you provide more code or create a jsFiddle of this, I can provide more insight.
In the meantime, make sure your 4 images and 4 text objects appear on the stage before you call the transitionTo (comment out the transition temporarily), then give it another go.
var stage = new Kinetic.Stage({container : 'container', width : 800, height : 600});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({id : 'scoreGroup', x : 0, y : 0});
layer.add(group);
stage.add(layer);
// add images and text as usual
var imageObj = new Image();
imageObj.onload = function() {
var image = new Kinetic.Image({x : 20, y : 20, width : 100, height : 100, image : imageObj});
group.add(image);
};
imageObj.src = '[path_to_image]';
layer.draw();
group.transitionTo({x : 600, y : 400, duration : 3});
Let me know what you come up with.