I want to modify style of the method select . I'm able to change the style of this method but i'm not able to duplicate the white border of blue stroke.
Someone is able to style vector with a stroke and put a border to the stroke?
See this example, for understand what i'm talking about:
http://openlayers.org/en/v3.4.0/examples/select-features.html
The trick is that you have two styles. With the first style you are drawing a white line, with the second style a thinner blue line on top:
var width = 3;
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'white',
width: width + 2
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: width
})
})
];
Related
How can I change the font color of the text below? my background is dark.
my jsfiddle: https://jsfiddle.net/theg99/2vsnmb16/1/
I did mange to change the colors of the lines with:
var line0 = container.children.push(
am5.Line.new(root, {
position: "absolute",
stroke: root.interfaceColors.get("text"),
strokeDasharray: [2, 2],
stroke: am5.color('#0xFFFFFF'), //<--I added this, but whats for text?
})
);
It looks like this should work:
subSeries.labels.template.set("fill", am5.color(0xff0000));
This changes all the labels on your second chart - is that what you're looking for?
I draw a line, then try to change it, leaving the same starting point with x1(left) and x1(top) and moving the endpoint by changing the line's width (x2-x1 - negative when moved left of originating point) and height (determined by y2-y1).
The line is drawn repeatedly with positive width value but 90% of the time it has gaps in the stroke as if the line is not fully stretched from border to border.
Below I define the line, it works well and connects my 2 points. Then, I modify the line when one of the flow objects is moved. When I move the bottom object to the right (positive width), it works fine, when I move to the left (negative width) the line does not reach its borders. The line has borders: true so I can see that the borders are lined up perfectly with the flow objects they are trying to connect (visible in the images).
//[startleft, starttop, endleft, endtop]
canvas.add(new fabric.Line(
[globalConnect[0], globalConnect[1], globalConnect[2], globalConnect[3]], {
stroke:'black',
strokeWidth:3,
lockScalingX:true,
lockScalingY:true,
lockRotation:true,
hasControls:true,
hasBorders:true,
lockMovementX:true,
lockMovementY:true
})
);
canvas.item(tempObjectIdx + 1).left = tempX1;
canvas.item(tempObjectIdx + 1).top = tempY1;
canvas.item(tempObjectIdx + 1).width = tempX2-tempX1;
canvas.item(tempObjectIdx + 1).height = tempY2-tempY1;
Example of the line when it's not fully drawn: screenshot
Example of what line looks like with positive width or negative width when it works fine: screenshot
Anybody having similar problems with negative widths when redrawing a line? Is there something to do with origination point - or recalculating coordinates, I do redraw canvas after setting these values - works great for positive value, but the line does not span the border box when width is negative (I have tried redrawing line from bottom origin with positive width and negative height - no better?)
If you just need the line to connect two points and update it whenever those two points are updated, you only have to set the line's x1,y1 and x2,y2 on each appropriate event. Here's an example where such line is updated when the boxes fire moving events:
const canvas = new fabric.Canvas('c')
const box1 = new fabric.Rect({
left: 50,
top: 50,
width: 100,
height: 100,
fill: 'green'
})
const box2 = new fabric.Rect({
left: 250,
top: 250,
width: 100,
height: 100,
fill: 'red'
})
const box1point = box1.getPointByOrigin('center', 'bottom')
const box2point = box2.getPointByOrigin('center', 'top')
const connector = new fabric.Line(
[box1point.x, box1point.y, box2point.x, box2point.y],
{
stroke: "black",
strokeWidth: 3,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: true,
hasBorders: true,
lockMovementX: true,
lockMovementY: true
}
)
box1.on('moving', function() {
const connectPoint = this.getPointByOrigin('center', 'bottom')
connector.set({
x1: connectPoint.x,
y1: connectPoint.y
})
})
box2.on('moving', function() {
const connectPoint = this.getPointByOrigin('center', 'top')
connector.set({
x2: connectPoint.x,
y2: connectPoint.y
})
})
canvas.add(box1, box2, connector)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="400"></canvas>
How can I draw a rectangle with a transparent color?
I tried the below code. I am using hummusjs for modifying pdf.
cxt.drawRectangle(x,y,width,height,{type: 'fill',
color: '#eeeeee',
opacity: 0.9});
If your intention is to draw a rectangle without fill and only containing borders, try this:
cxt.drawRectangle(x,y,width,height,{type: 'stroke',
color: '#eeeeee',
opacity: 0.9});
I have lines in fabricjs which may be at an angle. I want the user to be able to select them, but the selection outline is a rectangle with corners at the ends of the line. The user should only be able to select the line when the cursor is over the line, or at least within a few pixels of it. So I use the mousemove event to set the cursor when it's over the line and will do other things when he clicks on it.
But fabricjs only lets me set the cursor when selectable is true and then the user gets this blue rectangle around the line, which is not helpful. How can I get rid of this rectangle, or have the cursor change when selectable is false?
First, add perPixelTargetFind and targetFindTolerance to fabric.Canvas instance.
var canvas = new fabric.Canvas('canvas', {
perPixelTargetFind: true,
targetFindTolerance: 5
});
Then, add padding to fabric.Line instance.
var line = new fabric.Line([50, 50, 250, 250], {
padding: 5
});
canvas.add(line);
The targetFindTolerance numeric value is only respected by diagonal lines as far as I can tell. The padding numeric value is only respected by horizontal lines as far as I can tell. Both targetFindTolerance and padding must be set for either type of line to respect the rule. It's unclear whether this is buggy or intentional behavior.
This should get you fairly close, if I understood you correctly:
Here's the JavaScript code:
var canvas = new fabric.Canvas('canvas', {
width: 300,
height: 300,
perPixelTargetFind: true,
selection: false,
hoverCursor: 'default'
});
line = new fabric.Line([50, 50, 250, 250], {
strokeWidth: 5,
stroke: 'black',
originX: 'center',
originY: 'center',
hasControls: false,
hasBorders: false,
targetFindTolerance: 8
});
canvas.add(line);
And finally the all important JSFiddle, https://jsfiddle.net/rekrah/tvcufesq/.
Let me know if you have any more questions. Always happy to help!
try add padding and targetFindTolerance to line.
I was trying to add to canvas item which will be dragable but not selectable so I did like this
var canvas = new fabric.Canvas('root');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.add(new fabric.Circle({ radius: 30, fill: '#5f5', top: 160, left: 100 }));
canvas.item(0).hasControls = canvas.item(0).hasBorders = false;
Now I'm not able to select as a group element 0 (this is ok!) but when I'm selecting group which contains also item 1 then item 0 is also selected (this is not good). How can I fix it?
I know this question is very old but:
canvas.item(0).hasControls = canvas.item(0).hasBorders = false;
Will make the object with invisible border and invisible controls, so it looks like you are not selecting it, but you are still doing and not drawing any controls.
There is no way to make an object unselectable BUT draggable.
If you cannot select it ( setting .selectable=false), you cannot drag it.
When an object is in a selection group its border get drawn anyway, whatever setting is on .hasBorders.