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
Related
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,
});
I am facing as issue using fabricjs as pattern is not applying on line object. It fills the object property with pattern images but is not showing pattern on line. jsfiddle ins attached.
var line = new fabric.Line([10, 25, 300, 25], {
stroke: 'red',
strokeWidth: 5,
selectable: true,
left: 0,
top: 0
});
canvas.add(line);
fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function (img) {
line.setPatternFill({
source: img,
repeat: 'repeat'
});
canvas.renderAll();
});
console.log(line);
Because Fabric js setPatternFill only apply pattern to the fill property of object.But line object not have a fill property,only have a stroke so we apply pattern differently like new fabric.Pattern
var canvas = new fabric.Canvas("c")
var line = new fabric.Line([10, 25, 300, 25], {
stroke: 'red',
fill:"red",
strokeWidth: 10,
selectable: true,
left: 0,
top: 0
});
canvas.add(line);
fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function (img) {
line.stroke = new fabric.Pattern({
source: img,
repeat: 'repeat'
});
canvas.renderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c"></canvas>
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.
I am trying to move three circles, after they gradually fade in, to the top left of the page so that they overlap on a box. At the moment, I set a timeout, but it only works for the first circle and the movement is really fast. How can I move them all as a group and slow down the movement?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js">
</script>
<script>
var fadeIn = function(shape) {
var o = shape.getOpacity();
o = o + 0.05 >=0.5 ? 0.5 : o + 0.05;
shape.setOpacity(o);
shape.getLayer().draw();
if(o !== 0.4) {
setTimeout(function() {
fadeIn(shape).delay(3000*3);
}, 720);
}
};
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 700
//width: 578,
//height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: '#CCCCCC',
stroke: 'yellow',
strokeWidth: 8,
opacity: 0.1
});
circle.hide();
setTimeout(function() {
circle.show();
fadeIn(circle).delay(3000*3);
}, 1720);
layer.add(circle);
var circle2 = new Kinetic.Circle({
x: stage.getWidth() / 2.1,
y: stage.getHeight() / 2.1,
radius: 70,
fill: '#CCCCCC',
stroke: 'yellow',
strokeWidth: 8,
opacity: 0.1
});
circle2.hide();
setTimeout(function() {
circle2.show();
fadeIn(circle2).delay(3000*3);
}, 5600);
// add the shape to the layer
layer.add(circle2);
var circle3 = new Kinetic.Circle({
x: stage.getWidth() / 2.2,
y: stage.getHeight() / 2.2,
radius: 70,
fill: '#CCCCCC',
stroke: 'yellow',
strokeWidth: 8,
opacity: 0.1
});
circle3.hide();
setTimeout(function() {
circle3.show();
fadeIn(circle3).delay(3000*3);
}, 12000);
// add the shape to the layer
layer.add(circle3);
// var boxGroup = new Kinetic.Group({
//x: 10,
//y: 10,
//draggable: true
//});
var boxGroup = new Kinetic.Group({
x: -250,
y: -250,
draggable: true
});
var box = new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 100,
fill: '#CCCCCC',
stroke: 'black'
});
boxGroup.add(box);
layer.add(box);
layer.add(boxGroup);
// add the layer to the stage
stage.add(layer);
setTimeout(function() {
circle.moveTo(boxGroup).delay(5000*3);
circle2.moveTo(boxGroup).delay(5000*3);
circle3.moveTo(boxGroup).delay(5000*3);
}, 24000);
</script>
</body>
http://jsfiddle.net/SAnFM/9/
KineticJS has a great transitionTo() function which you can call. It can animate any numerical property, like position or opacity. I created a fiddle to show this, as setTimeout is a bit of an ancient function compared to what is built into the browsers nowadays with RequestAnimationFrame (all major browsers implement this nowadays and KineticJS has a built in fallback like most other libraries do)
I cleaned up your code a little, removing comments and added an extra circle, for fun.
but really all you need is:
myShape.transitionTo({shape configuration, duration});
For example:
circle.transitionTo({
x: box.getX(), //coordinates to transition to
y: box.getY(),
opacity: 1,
duration: 1 // length of time for this animation in seconds, REQUIRED for animation to work
});