How to create horizontal line in jointjs.I want to draw simple horizontal lines between two points in joint js .Can someone please tell me how to do that.
My papers look like :
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: w,
height:h,
model: graph,
gridsize:4
});
var paper2 = new joint.dia.Paper({
el: $('#myimage'),
width: w,
height:600,
model: graph,
interactive : false
});
And I have created two horizontal line like:
var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);
V(paper2.viewport).append(line);
But I am not getting the line in paper while line is printed in paper2
You can use a link for that:
graph.addCell(new joint.dia.Link({
source: { x: 50, y: 100 },
target: { x: 300, y: 100 }
}))
Or SVG:
var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);
V is a global variable exported by JointJS and is a tiny library for easier SVG manipulation that is called Vectorizer (http://jointjs.com/api#v).
Keep in mind that if you want to add another line into the other paper (paper2), you must first clone the first one:
V(paper2.viewport).append(line.clone())
If you don't do that, the line from paper is taken out and appended to the paper2, that's why you don't see the line in paper anymore.
Related
My gpx file already contains elevation information for each trkpt and I can augment this with a speed for each trkpt. I would like to represent the elevation or the speed at each trkpt by varying the color of the track. For instance: slow is blue, fast is red.
How can I do this?
And this probably means: Which files and functions in Openlayers do I have to change to do this?
You can try the ol/style/FlowLine of ol-ext to achieve this.
Using this style, you can change the with/color of the feature along the line using a function. This example show how to: http://viglino.github.io/ol-ext/examples/style/map.style.flowline2.html.
You just have to calculate the width (or color) along the feature geometry varying according the speed or altitude:
const flowStyle = new ol.style.FlowLine({
width: function(f, step) {
// calculate the with of the feature f at the given step
// step is the curvilinear abscissa between 0,1
// (0: first coordinate, 1: last one)
const width = ...
return width;
}
});
#+
You should go with a stylefunction for the vector layer:
https://openlayers.org/en/v4.6.5/apidoc/ol.html#.StyleFunction
This function is checked for each feature to be displayed on the vector layer and the related style can be set/returned programmatically. For example:
function gpxStyle(feature) {
var style = null;
if (feature.get("speed")>="100") {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'red'
})
})
});
}
else {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
}),
fill: new ol.style.Fill({
color: 'blue'
})
})
});
}
return [style];
}
var gpxLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: gpxStyle
});
enter image description here
enter image description here
I am using Fabricjs. It's version is 2.4.5.
I want to fill diagonal line both side at different time.
Right Striped Diagonal :
https://i.hizliresim.com/P1My55.png
Left Striped Diagonal :
https://i.hizliresim.com/JZ20pQ.png
I tried like this fill each 0.01 white and black. But i could not set diagonal. My code is working, if image height big.
The higher the polygon height, the more horizontal the lines are.
canvas = new fabric.Canvas('canvas');
let points = [
{x: 0, y: 0},
{x: 300, y: 0},
{x: 300, y: 350},
{x: 0, y: 350}
];
let polygon = new fabric.Polygon(points, {
fill : 'white',
stroke : 'black',
strokeWidth : 5,
selectable: true,
objectCaching: false,
lockScalingX: true,
lockScalingY: true,
lockMovementX: true,
lockMovementY: true,
lockRotation: true
});
let colorStops = {};
for (let i = 0; i <= 100; i++) {
let key = (i / 100);
colorStops[key] = i % 2 === 0 ? "black" : "white";
}
polygon.setGradient('fill', {
x1: -polygon.width,
y1: -polygon.height,
x2: polygon.width,
y2: polygon.height,
colorStops: colorStops
});
canvas.add(polygon);
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.min.js"></script>
<canvas id="canvas" width="600" height="600" class="canvas"></canvas>
Fiddle
I am developing a navigation application, which draws planned route on a map. Planned route consists of points connected with a line. Each point is labelled with distance and direction. When I initially draw the route on the map, I calculate text position in a way, where it doesn't interfere with the line - I use offsetX, offsetY and rotation style attributes. Unfortunately, when the map view is rotated, not of the mentioned attributes is changed - text is not rotated. Is there a way, how to rotate the text with the view, so it will remain on it's position relative to the point? I have already tried rotateWithView: true with both image and text parts.
My style is defined like:
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
}),
text: new ol.style.Text({
textAlign: "center",
textBaseline: "middle",
font: 'normal 1.5rem Arial',
text: "This is my text",
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'black', width: 1}),
offsetX: 10,
offsetY: 15,
rotation: 0.3
})
})];
Update feature rotation on map view property change event.
map.getView().on('propertychange', function(event) {
textStyle.setRotation(this.getRotation());
mySource.changed();
});
var textStyle = new ol.style.Text({
// ...
});
var layer = new ol.layer.Vector({
source: mySource,
style: new ol.style.Style({
text: textStyle,
// ...
})
});
Imagine I have Rect element and I wish to decorate it with a small (say 16x16) PNG image in the upper left. I am unable to determine how to achieve that task. I have studied the docs but have (so far) been unable to find a sample or reference on how to achieve that task. Does anyone have a recipe or a sample pointer that they would be willing to share to help me achieve my goal?
Better is to create your own custom shape that has a rectangle, image and text. This gives you much more flexibility and you don't have to have two elements in order to express one shape. Your shape decorated with a little image in the top left corner may look like:
joint.shapes.basic.DecoratedRect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><image/><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.DecoratedRect',
size: { width: 100, height: 60 },
attrs: {
'rect': { fill: '#FFFFFF', stroke: 'black', width: 100, height: 60 },
'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black' },
'image': { 'ref-x': 2, 'ref-y': 2, ref: 'rect', width: 16, height: 16 }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
And you can use it like this in your diagrams:
var decoratedRect = new joint.shapes.basic.DecoratedRect({
position: { x: 150, y: 80 },
size: { width: 100, height: 60 },
attrs: {
text: { text: 'My Element' },
image: { 'xlink:href': 'http://placehold.it/16x16' }
}
});
graph.addCell(decoratedRect);
Note how is the shape specified, the important bits are the markup, type and the attrs object that references the SVG elements in the markup by normal CSS selectors (here just tag selectors but you can use classes if you want). For the image tag, we take advantage of the JointJS special attributes for relative positioning (ref, ref-x and ref-y). With these attributes, we position the image relatively to the top left corner of the rect element and we offset it by 2px from the top edge (ref-y) and 2px from the left edge (ref-x).
One note: It is important that the type attribute ('basic.DecoratedRect') matches the namespace the shape is defined in (joint.shapes.basic.DecoratedRect). This is because when JointJS re-constructs graphs from JSON, it looks at the type attribute and makes a simple lookup to the joint.shapes namespace to see if there is a shape defined for this type.
We can create an element type for an image using the following recipe:
var image = new joint.shapes.basic.Image({
position : {
x : 100,
y : 100
},
size : {
width : 16,
height : 16
},
attrs : {
image : {
"xlink:href" : "images/myImage.png",
width : 16,
height : 16
}
}
});
graph.addCell(image);
This will position the image at x=100,y=100. It is important to make the size width/height match the attrs/image width/height and be the width/height of the image itself.
Although this doesn't decorate a previous element, it can be positioned over a previous element achieving the desired effect.
Can't quite figure out how to layer these objects with kenetic js, I want circle to be on top of circle2. Am I writing 'circle.setZIndex();' improperly? This is breaking the script.
jsfiddle with .setZIndex lines commented out: http://jsfiddle.net/ZfuDs/
function writeMessage(messageLayer, message) {
var context = messageLayer.getContext();
messageLayer.clear();
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var shapesLayer = new Kinetic.Layer();
var messageLayer = new Kinetic.Layer();
var circle2 = new Kinetic.Circle({
x: 360,
y: stage.getHeight() / 2,
radius: 90,
fill: 'orange',
stroke: 'black',
strokeWidth: 4
});
circle2.setZIndex(3);
var circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
circle.setZIndex(2);
shapesLayer.add(circle);
shapesLayer.add(circle2);
stage.add(shapesLayer);
stage.add(messageLayer);
You can try to add circle2 shape first and then add circle shape second
shapesLayer.add(circle2);
shapesLayer.add(circle);
instead of
shapesLayer.add(circle);
shapesLayer.add(circle2);
Try this one http://jsfiddle.net/ZfuDs/1/
it appears that you can't call the z-index functions before the object is added to a layer I get:
TypeError: this.parent is undefined
this.parent.children.splice(index, 1);
I don't get an error anymore, but the setZIndex() method doesn't seem to work even so, but
circle.moveToTop() does work, check http://jsfiddle.net/ZfuDs/3