I want to draw a fabric.js polygon with flash lines. What is the property that provides the flash line?
var points = [x0, y0, x1, y1 , x2 ,y2];
let polygon = new fabric.Polygon(points, {
fill: 'rgba(0,0,0,0)',
stroke: 'red',
selectable: false,
objectCaching: false,
});
Related
I use a clipping area with fabric.js to create a graph. However, the grid lines look different on a canvas size bigger than about 1000px. It only occurs with imageSmoothingEnabled: false. See the image. Note: the size of the frames have nothing to do with the size of the canvas.
To create the grid lines, I create one original that is wider than the area, and then clone them. The cloned lines are added to the clipArea object. Here is the relevant code.
HTML:
<canvas id="canvas" width="966" height="520"></canvas>
Javascript:
var canvas = new fabric.StaticCanvas('canvas', {
imageSmoothingEnabled: false
});
var rect = new fabric.Rect({
originX: 'left',
originY: 'top',
fill: 'transparent',
width: x1-x0,
height: y1-y0
});
var clipArea = new fabric.Group([rect], {
originX: 'left',
originY: 'top',
width: canvas.width*2,
height: canvas.height*2,
left: -canvas.width,
top: -canvas.height
});
rect=clipArea.item(0)
rect.set({left: x0,top: y0});
clipArea.clipPath = rect;
canvas.add(clipArea);
var yline = new fabric.Line([0, 0, 1200, 0], {
originX: 'left',
originY: 'center',
stroke: myFrameColor,
strokeWidth: 2,
strokeDashArray: [1, 3.4]
});
// clipArea.add(yline)
Of course I could draw the gridlines in a different way without using clipping, but I need a clipping area anyway. And I'd like to understand why this is happening.
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
This JSFiddle shows two shapes; a circle and a diamond (which has been drawn as a polygon):
var canvas = new fabric.Canvas('c');
canvas.add( new fabric.Circle({
top: 10, left: 10,
radius: 15,
fill: 'orange'
}));
canvas.add( new fabric.Polygon(
[
{x: 50, y: 0},
{x: 100, y: 100},
{x: 50, y: 200},
{x: 0, y: 100}
],{
fill: 'red',
hasBorders: false, hasControls: false, hasRotatingPoint: false, lockMovementX: true, lockMovementY: true,
}));
I am having problems with the bounding box of the diamond which is preventing the user from selecting the circle. I would like the user to be able to select the circle by clicking on the portion of it which is visible from behind the diamond.
Is there a way to inform fabric that I only want the bounding area of a polygon to be the area that is affected by the fill colour? i.e. so it would be possible to click the circle?
Note that this is an over-simplified example of my use-case. My real-life polygon is more complicated than a simple diamond, so it would not be possible to use a rotated rectangle instead.
This question kind old and easy but there no answer .
I just leave it here .
You need
perPixelTargetFind: true
JsFiddle
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.
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