I want to draw a shape as a background using fabric.js. I am trying to set scalable to false when creating the shape but it isn't working as expected.
I can’t select other shapes when scalable is set to false. Can someone tell me how can I do this?
The code I am using is below:
var pol = new fabric.Polygon([
{x: 200, y: 0},
{x: 250, y: 50},
{x: 250, y: 100},
{ x: 150, y: 100},
{x: 150, y: 50}
],
{
left: 0,
top: 0,
scaleX: 2,
scaleY: 2,
fill: 'green'
}
);
Thanks in advance.
You could set any shape as a background in fabric.js , using setBackgroundImage method. This method won't affect other shapes and will resolve the object selection issue.
ᴅᴇᴍᴏ
var canvas = new fabric.Canvas('c');
var pol = new fabric.Polygon([
{ x: 200, y: 0 },
{ x: 250, y: 50 },
{ x: 250, y: 100 },
{ x: 150, y: 100 },
{ x: 150, y: 50 }],
{
left: 0,
top: 0,
scaleX: 2,
scaleY: 2,
fill: 'green'
});
canvas.setBackgroundImage(pol);
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
// create a rectangle with a fill and a different color stroke
var pol = new fabric.Polygon([
{x: 200, y: 0},
{x: 250, y: 50},
{x: 250, y: 100},
{ x: 150, y: 100},
{x: 150, y: 50}
],
{
left: 0,
top: 0,
selectable:false,
fill: 'green'
}
);
pol.set({
scaleX: canvas.width/pol.width,
scaleY: canvas.height/pol.height,
})
canvas.setBackgroundImage(pol);
canvas.renderAll();
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>
This one will fit to any canvas size, set scaleX and scaleY
Related
I have this code:
gsap.to('.planet-man', {
duration: 2,
scrollTrigger: {
trigger: '.we-do',
start: 'top 25%',
end: '70% 50%',
scrub: 1,
markers: true,
toggleActions: 'reverse',
},
motionPath: {
path: [
{x: -30, y: 35},
{x: -180, y: 70},
{x: -180, y: 150},
{x: -340, y: 250},
{x: -410, y: 275},
{x: -150, y: 310},
{x: -500, y: 350},
{x: -185, y: 600},
{x: -270, y: 700},
{x: -100, y: 820},
],
}
});
This is for scrolling, but since the movement is pixel-by-pixel, it is static. I need X - to set a percentage value so that it can be optimized for many screens and not just for my own. Perhaps a function that will dynamically measure the width of my screen and substitute my X values there, in accordance with my screen to the rest, will suit me.
$(window).resize(function() {
$('.second-area').css('width', function () {
const value = $('.second-area').css('width');
console log(value);
// return value + "px";
});
});
The question is how can I do this? ( The code with window.resize is optional, it's just what I have at the moment. Only one x is important, give a percentage value. )
So I have triangles and getting Information of which triangles is on what Connection.
like so:
[
{id:3
connected:[2,1,null]}
{id:1
connected:[null,null,3]}
{id:2
connected:[4,3,null]}
{id:4
connected:[2,null,null]}
]
It would look like this:
I need some method to calculate the X- and Y-position and rotation
When i hard code it would look like this:
[
{
id: 3,
x: 200,
y: 200,
radius: 100,
rotation: 0,
},
{
id: 1,
x: 300,
y: 150,
radius: 100,
rotation: 180,
},
{
id: 2,
x: 200,
y: 310,
radius: 100,
rotation: 180,
},
{
id: 4,
x: 300,
y: 360,
radius: 100,
rotation: 0,
},
]
I would like to configure fabricJS to add extra rotation controls. I know there is a control API, I am not sure how to use it. control-api
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red', transparentCorners: false, top: 50, left: 50 });
canvas.add(rect);
canvas.setActiveObject(rect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<canvas id="c" width="400" height="400" ></canvas>
The new control api allows you to add controls to the
fabric.Object.prototype.controls
This object has a key for each control, and the one that actually hold the rotation is the controls.mtr by default.
we can add mtr1, mtr2 and mtr3 contols in this way.
const originalControl = fabric.Object.prototype.controls.mtr;
fabric.Object.prototype.controls.mtr1 = new fabric.Control({
x: -0.5,
y: 0,
offsetX: -40,
actionHandler: originalControl.actionHandler,
});
Look in the snippet for more details
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red', transparentCorners: false, top: 50, left: 50 });
canvas.add(rect);
const originalControl = fabric.Object.prototype.controls.mtr;
fabric.Object.prototype.controls.mtr1 = new fabric.Control({
x: -0.5,
y: 0,
offsetX: -40,
actionHandler: originalControl.actionHandler,
withConnection: true,
actionName: 'rotate',
});
fabric.Object.prototype.controls.mtr2 = new fabric.Control({
x: 0.5,
y: 0,
offsetX: 40,
actionHandler: originalControl.actionHandler,
withConnection: true,
actionName: 'rotate',
});
fabric.Object.prototype.controls.mtr3 = new fabric.Control({
x: 0,
y: 0.5,
offsetY: 40,
actionHandler: originalControl.actionHandler,
withConnection: true,
actionName: 'rotate',
});
canvas.setActiveObject(rect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<canvas id="c" width="400" height="400" ></canvas>
Ugly but work.
A note, not specifying actionName: 'rotate' does not keep the rotation point in the center. This is obviously wrong and should be addressed in the library probably.
How can I animate fillLinearGradientColorStops of a KineticJS Rect? I tried using a tween but surely it doesn't work.
The rectangle:
var rect = new Kinetic.Rect({
x: 20,
y: 20,
width: 100,
height: 100,
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});
The tween:
var tween = new Kinetic.Tween({
node: rect,
duration: 2,
easing: Kinetic.Easings.Linear,
fillLinearGradientColorStops: [0, 'black', 1, 'green']
});
tween.play();
Please see the fiddle http://jsfiddle.net/ZdCmS/. Is it not possible?
From there: https://github.com/ericdrowell/KineticJS/issues/901
You can use an external tweening library, like GreenSock (http://www.greensock.com/gsap-js/) with it's ColorProps plugin (http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html) to tween colors and then apply them to the Kinetic shape on each frame update: http://jsfiddle.net/ZH2AS/2/
No plans for direct support of tweening color stops on a gradient fill.
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var linearGradPentagon = new Kinetic.RegularPolygon({
x: 150,
y: stage.height() / 2,
sides: 5,
radius: 70,
fillLinearGradientStartPoint: {
x: -50,
y: -50
},
fillLinearGradientEndPoint: {
x: 50,
y: 50
},
fillLinearGradientColorStops: [0, 'white', 1, 'black'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(linearGradPentagon);
stage.add(layer);
//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);
//object to store color values
var tmpColors = {
color0: 'white',
color1: 'black'
};
//tween the color values in tmpColors
TweenMax.to(tmpColors, 5, {
colorProps: {
color0: 'black',
color1: 'red'
},
yoyo: true,
repeat: 5,
ease:Linear.easeNone,
onUpdate: applyProps
});
function applyProps() {
linearGradPentagon.setAttrs({
fillLinearGradientColorStops: [0, tmpColors.color0, 1, tmpColors.color1]
});
layer.batchDraw();
}
I'm trying to stroke my Kinetic Spline object with a gradient instead of a solid color. However, my spline is turning out black. Any ideas?
Here's my code:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueSpline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
strokeWidth: 10,
lineCap: 'round',
tension: 1,
fillLinearGradientStartPoint: [73, 160],
fillLinearGradientEndPoint: [300, 109],
fillLinearGradientColorStops: ['#ff0000', '#00ff00'],
fillPriority: 'linear-gradient'
});
layer.add(blueSpline);
stage.add(layer);
You can try this:
var ctx = layer.getContext();
var grad = ctx.createLinearGradient(73, 160, 300, 109);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(1, '#00ff00');
var blueSpline = new Kinetic.Spline({
...
stroke: grad,
...
});
Here is an example:
http://jsfiddle.net/qK6nq/
KineticJS does not support gradient strokes--only gradient fills.