I have a bar diagram for a polling system.i want two transition(tween) effects on events they are following
Mouse over OR check box check
Click button
I am using the same node for tween.tween.play() is working fine but on reverse the y cordinate that i gave in tween constructor not working.
checkout my jsfiddle
var stagewidthbywindow = 1000;
var stagesetting = {
container: "container_1_1_0",
width: stagewidthbywindow,
height: 50
};
var rectwidth0 = 0;
var rectSum = 0;
var stage110 = new Kinetic.Stage(stagesetting);
var layer110 = new Kinetic.Layer();
var group110 = new Kinetic.Group();
layer110.add(group110);
function increasestage() {
var myChecker = setInterval(function () {
var stage_height = stage110.getHeight();
if (stage_height == 250) {
clearInterval(myChecker);
} else {
stage110.setAttr("height", stage_height + 2.5);
}
}, 10);
}
var rectwidth1 = stagesetting.width * 0.5;
rectSum += rectwidth0;
var rectObject1 = {
x: rectSum,
y: 0,
width: rectwidth1,
height: 50,
fill: "#DA4B4B",
stroke: "#ffffff",
strokeWidth: 2,
opacity: 1
};
var shadeObject = {
x: rectSum,
y: 0,
width: stagewidthbywindow,
height: 50,
fill: "#f3f3f3",
stroke: "#f3f3f3",
strokeWidth: 1,
opacity: 1
};
var shade111 = new Kinetic.Rect(shadeObject);
var rect111 = new Kinetic.Rect(rectObject1);
rectSum += rectwidth1;
var ansOption111 = new Kinetic.Text({
x: rect111.getX() + 10,
y: rect111.getY() + 10,
text: "iPhone 5s",
fontSize: 14,
fontFamily: "Merriweather Sans",
width: rect111.getWidth(),
align: "left",
fill: "#ffffff"
});
var ansPercentage111 = new Kinetic.Text({
x: rect111.getX() + 10,
y: 30,
text: "50%",
fontSize: 15,
fontFamily: "Merriweather Sans",
width: rect111.getWidth(),
fontStyle: "bold",
align: "left",
fill: "#ffffff"
});
group110.add(shade111);
group110.add(rect111);
group110.add(ansOption111);
group110.add(ansPercentage111);
rect111.tween = new Kinetic.Tween({
node: rect111,
scaleX: 1,
scaleY: 5,
easing: Kinetic.Easings.Linear,
duration: .5
});
ansOption111.tween = new Kinetic.Tween({
node: ansOption111,
scaleX: 1.5,
scaleY: 1.5,
x: rect111.getX() + 20,
y: 20,
easing: Kinetic.Easings.Linear,
duration: .5,
});
ansPercentage111.tween = new Kinetic.Tween({
node: ansPercentage111,
x: rect111.getX() + 20,
y: 100,
scaleX: 3,
scaleY: 3,
easing: Kinetic.Easings.Linear,
duration: .5,
});
rect111.on("mouseover touchstart", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 250);
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
}
});
rect111.on("mouseout touchend", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 50);
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
}
});
ansOption111.on("mouseover touchstart", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 250);
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
}
});
ansOption111.on("mouseout touchend", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 50);
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
}
});
$("#sample_size1").change(function () {
if ($(this).is(":checked") && $("#orientation_1_1_0").val() == "horizontal") {
var scaleFactor = 5;
increasestage();
stage110.draw();
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
} else if (!$(this).is(":checked") && $("#orientation_1_1_0").val() == "horizontal") {
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
setTimeout(function () {
stage110.setAttr("height", 50);
}, 600);
}
});
var rectangle111 = new Kinetic.Tween({
node: rect111,
duration: .5,
x: 0,
y: 20 * 1 + 18 * 0,
width: rectwidth1,
height: 20,
opacity: 1,
scaleX: 1
//scaleY: 0.4
});
var shadetween111 = new Kinetic.Tween({
node: shade111,
duration: .5,
x: 0,
y: 20 * 1 + 18 * 0,
//width: stagewidthbywindow,
height: 20,
opacity: 1,
scaleX: 1
});
var answerOption111 = new Kinetic.Tween({
node: ansOption111,
duration: .5,
x: 0,
y: (40 * 0),
width: 150,
height: 15,
opacity: .9,
strokeWidth: 2,
scaleX: 1
});
function call_answerPercentage111() {
var answerPercentage111 = new Kinetic.Tween({
node: ansPercentage111,
x: 160,
y: (40 * 0),
width: 150,
height: 18,
opacity: .9,
duration: 0.5,
strokeWidth: 2,
scaleX: 1
});
return answerPercentage111;
}
document.getElementById("arrow110").addEventListener("click", function () {
if ($("#orientation_1_1_0").val() == "horizontal") {
$("#arrow110").addClass("btn-arow-down");
stage110.setAttr("height", 4 * 40);
$("#orientation_1_1_0").val("vertical");
if ($("#sample_size1").is(":checked")) {
console.log("destroy");
}
ansPercentage111.setFill("black");
ansOption111.setFill("black");
rectangle111.play();
shadetween111.play();
answerOption111.play();
var answerPercentage111 = call_answerPercentage111();
answerPercentage111.play();
layer110.draw();
} else if ($("#orientation_1_1_0").val() == "vertical") {
$("#arrow110").removeClass("btn-arow-down");
$("#orientation_1_1_0").val("horizontal");
ansPercentage111.setFill("white");
ansOption111.setFill("white");
rectangle111.reverse();
shadetween111.reverse();
answerOption111.reverse();
var answerPercentage111 = call_answerPercentage111();
answerPercentage111.reverse();
answerPercentage111.destroy();
layer110.draw();
setTimeout(function () {
stage110.setAttr("height", 50);
}, 1000);
}
}, false);
stage110.add(layer110);
On calling call_answerPercentage111 you are creating new tween. You can not reverse tween that is not played with play() function. Also you are calling destroy() method after reverse() - you can do this ONLY after tween is done (or you will stop the tween).
http://jsfiddle.net/ynNUN/3/
Related
I'm trying to make a restriction: when a group of objects is selected, some specific object must not be included in the selection.
F.e. we create 3 rectangles. If we select the group and the red one is inside of it, it must be removed from selection:
function addRect(){
var redRect = new fabric.Rect({
left: 50,
top: 50,
fill: 'red',
width: 50,
height: 50
});
var greenRect = new fabric.Rect({
left: 100,
top: 100,
fill: 'green',
width: 50,
height: 50
});
var blueRect = new fabric.Rect({
left: 150,
top: 150,
fill: 'blue',
width: 50,
height: 50
});
canvas.add(redRect);
canvas.add(greenRect);
canvas.add(blueRect);
}
function createCanvas(id){
canvas = new fabric.Canvas(id);
addRect();
canvas.on('selection:created', function(e) {
for (var i = 0; i < canvas.getActiveObjects().length; i++) {
if(canvas.getActiveObjects()[i].fill == "red"){
//somehow remove the red one from selection
};
}
});
return canvas;
}
discardActiveObject() will remove the whole selection.
"selected = false" also doesn't work.
Any ideas?
There are two ways to achieve this using selectable property
http://fabricjs.com/docs/fabric.Rect.html#selectable
By setting selectable: false within the call back function
By setting selectable: false during object creation.
function addRect() {
var redRect = new fabric.Rect({
left: 50,
top: 50,
fill: "red",
width: 50,
height: 50,
selectable: false
});
var greenRect = new fabric.Rect({
left: 100,
top: 100,
fill: "green",
width: 50,
height: 50
});
var blueRect = new fabric.Rect({
left: 150,
top: 150,
fill: "blue",
width: 50,
height: 50
});
canvas.add(redRect);
canvas.add(greenRect);
canvas.add(blueRect);
}
function createCanvas(id) {
canvas = new fabric.Canvas(id, {
height: 500,
width: 800,
backgroundColor: "rgb(100,100,200)",
selectionColor: "blue"
});
addRect();
canvas.on("selection:created", function(e) {
for (var i = 0; i < canvas.getActiveObjects().length; i++) {
if (canvas.getActiveObjects()[i].fill == "red") {
canvas.getActiveObjects()[i].selectable = false;
canvas.renderAll();
}
}
});
return canvas;
}
createCanvas("c");
<script src="https://cdn.jsdelivr.net/npm/fabric#5.2.4-browser/dist/fabric.min.js"></script>
<canvas id="c"> </canvas>
function addRect() {
var redRect = new fabric.Rect({
left: 50,
top: 50,
fill: "red",
width: 50,
height: 50,
selectable: false
});
var greenRect = new fabric.Rect({
left: 100,
top: 100,
fill: "green",
width: 50,
height: 50
});
var blueRect = new fabric.Rect({
left: 150,
top: 150,
fill: "blue",
width: 50,
height: 50
});
canvas.add(redRect);
canvas.add(greenRect);
canvas.add(blueRect);
}
function createCanvas(id) {
canvas = new fabric.Canvas(id, {
height: 500,
width: 800,
backgroundColor: "rgb(100,100,200)",
selectionColor: "blue"
});
addRect();
canvas.on("selection:created", function (e) {
for (var i = 0; i < canvas.getActiveObjects().length; i++) {
if (canvas.getActiveObjects()[i].fill == "red") {
//somehow remove the red one from selection
}
}
});
return canvas;
}
createCanvas("c");
<script src="https://cdn.jsdelivr.net/npm/fabric#5.2.4-browser/dist/fabric.min.js"></script>
<canvas id="c"> </canvas>
I am working on a google extension that opens four random pop-ups every hour (and opens different pop-ups during the day and night).
The pop-up sizes vary so I set each size of the pop-up url but it does not seem to work as seen in the picture. Does anyone have any ideas why it is not working?
Thank you so much :')
enter image description here
function showPopup() {
let date = new Date();
let h = date.getHours();
if(h > 5 && h < 20)
{
var Popups = [
{
url: 'https://looking4love.glitch.me/', // Day time -- Gorse
width: 400,
height: 530,
},
{
url: 'https://meetme2day.glitch.me/', //Canada goose
width: 400,
height: 530,
},
{
url: 'https://chat2me.glitch.me/', // Cow Parsley
width: 400,
height: 530,
},
{
url: 'https://meet-me-2nite.glitch.me/', //Eurasian Coot
width: 530,
height: 400,
},
{
url: 'https://meetmenow.glitch.me/', // Hawthorn
width: 400,
height: 530,
},
{
url: 'https://looking4relatioship.glitch.me/', // Bluebell
width: 400,
height: 530,
},
{
url: 'https://availablenow.glitch.me/', //Moss
width: 400,
height: 530,
},
{
url: 'https://cute-single-needs-lov.glitch.me/', // Poppies
width: 530,
height: 400,
},
];
var a = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var b = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var c = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var d = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
console.log(a,b,c,d);
// daytime
window.open(a.url, 'Go Outside!', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=20,left=20,width=${a.width},height=${a.height}`);
setTimeout(() => {
window.open(b.url, 'Go Outside! 02', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=200,left=200,width=${b.width},height=${b.height}`);
}, 1000);
setTimeout(() => {
window.open(c.url, 'Go Outside! 03', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=50,left=620,width=${c.width},height=${c.height}`);
}, 2000);
setTimeout(() => {
window.open(d.url, 'Go Outside! 04', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=100,left=820,width=${d.width},height=${d.height}`);
}, 3000);
}
else
{
var Popups = [
{
url: 'https://feeling-lonely.glitch.me/', // Night time -- Robin
width: 400,
height: 529,
},
{
url: 'https://talk-2-me.glitch.me/', // Mallard
width: 400,
height: 529,
},
{
url: 'https://looking4relatioship.glitch.me', // Blue bell
width: 400,
height: 529,
},
{
url: 'https://chat2metonite.glitch.me/', //Fuchisas
width: 400,
height: 529,
},
{
url: 'https://freetonight.glitch.me/', //Viviparous
width: 400,
height: 529,
},
{
url: 'https://chat-tonight.glitch.me/', //Teasel
width: 400,
height: 529,
},
{
url: 'https://free-tonight.glitch.me/', //Six-spot
width: 529,
height: 400,
},
];
var a = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var b = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var c = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var d = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
// nighttime
window.open(a.url + "?test=abc", 'Go Outside!', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=20,left=20,width=${a.width},height=${a.height}`);
setTimeout(() => {
window.open(b.url + "?test=abc", 'Go Outside! 02', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=200,left=200,width=${b.width},height=${b.height}`);
}, 1000);
setTimeout(() => {
window.open(c.url + "?test=abc", 'Go Outside! 03', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=50,left=620,width=${c.width},height=${c.height}`);
}, 2000);
setTimeout(() => {
window.open(d.url + "?test=abc", 'Go Outside! 04', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=100,left=820,width=${d.width},height=${d.height}`);
}, 3000);
}
let paragraphs = document.getElementsByTagName('body');
for (elt of paragraphs) {
elt.style['background-color']= '#000000';
elt.style['color']= '#000000';
// elt.style['filter'] = 'blur(50px)';
// elt.innerText = "";
}
}
setInterval(() => {
let d = new Date();
let m = d.getMinutes();
let s = d.getSeconds();
if(s % 20 == 0) // this for testing
// if(m == 21 && s == 0) // this for once an hour
{
// it is zero minutes and zero seconds...
showPopup();
}
}, 500);
I am trying to increase the corner radius of only one corner somethings like this (just the TopLeft) https://www.imagefu.com/create/button
I have tried modifying the corner radius using rx and ry but as it is meant for horizontal and vertical corner radius, gets applied to all the sides
var canvas = new fabric.Canvas('ctest');
canvas.add(new fabric.Rect({
left: 100,
top: 30,
width: 50,
height: 50,
originX: 'left',
originY: 'top',
rx: 12,
ry: 12
}));
http://jsfiddle.net/xm1os7jg/
Any suggestions would be helpful. Thank you
How about a crude work-around with grouped lines and circles?
var canvas = new fabric.Canvas('ctest');
var box = new fabric.Rect({
left: 0,
top: 0,
fill: false,
stroke: "red",
width: 50,
height: 50,
});
var circle = {
fill: 'transparent',
strokeWidth: 1,
stroke: false,
radius: 12,
clipTo: function(ctx) {
ctx.moveTo(0, 0);
ctx.arc(0, 0, 300, 3.14159, 4.71239);
},
};
var circle1 = new fabric.Circle(circle);
var line1 = new fabric.Line([12, 0, 50, 0], {
stroke: "red",
});
var line2 = new fabric.Line([0, 12, 0, 50], {
stroke: "red",
});
var line3 = new fabric.Line([50, 0, 50, 50], {
stroke: "red",
});
var line4 = new fabric.Line([0, 50, 51, 50], {
stroke: "red",
});
var group = new fabric.Group([box, circle1, line1, line2, line3, line4], {
left: 50,
top: 50,
transparentCorners: false,
cornerSize: 10,
});
group.cornerStyle = 'circle';
canvas.add(group);
$("#corner").click(function() {
circle1.set("stroke", "red");
box.set("stroke", false);
canvas.renderAll();
});
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<button id="corner">Corner</button>
<canvas id="ctest" width="600" height="600"></canvas>
As shown in the pictures below, I have a chart created with 'Chart JS'. This chart contains linear lines with various curves. I painted the areas between these lines with 'background color' in various colors.
My question is, when I create a random point on this chart, I just want to create an if statement based on colors.
For example,
There is the point called A and the variable called B.
If A point is in the yellow area, then B is 1.
If A point is in the light gray area, then B is 2.
Something like this.
Here is Picture:
Here is sample code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script type="text/javascript">
var x_A = new Array(2, 2, 2.5, 2.5, 2);
var y_A = new Array(2.5 , 3 , 3.5, 2.5 , 2.5);
var c_A = [];
for (var i = 0; i < x_A.length; i++) {
var obj = { x: x_A[i], y: y_A[i] };
c_A.push(obj);
}
var x_B = new Array(0, 1.5, 1.5, 0);
var y_B = new Array(0, 2, 0.5, 0);
var c_B = [];
for (var i = 0; i < x_B.length; i++) {
var obj = { x: x_B[i], y: y_B[i] };
c_B.push(obj);
}
var x_C = new Array(1.5, 1.5, 2, 2, 1.5);
var y_C = new Array(0.5, 2, 3, 2.5, 0.5);
var c_C = [];
for (var i = 0; i < x_C.length; i++) {
var obj = { x: x_C[i], y: y_C[i] };
c_C.push(obj);
}
var r_A = 'rgba(220, 20, 60,1)';
var r_B = 'rgba(255, 255, 56,1)';
var r_C = 'rgba(34, 139, 34,1)';
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'X',
showLine: true,
fill: true,
pointRadius: 7,
data: [{
x: 1,
y: 0.9
}],
borderWidth: 1,
pointBackgroundColor: "#000000",
lineTension: 0,
},
{
label:'Zone A',
showLine: true,
fill: true,
backgroundColor: r_A,
pointRadius: 0,
data: c_A,
borderWidth: 1,
borderColor: "#000000",
lineTension: 0,
},
{
label: 'Zone B',
showLine: true,
fill: true,
backgroundColor: r_B,
pointRadius: 0,
data: c_B,
borderWidth: 1,
borderColor: "#000000",
lineTension: 0,
},
{
label: 'Zone C',
showLine: true,
fill: true,
backgroundColor: r_C,
pointRadius: 0,
data: c_C,
borderWidth: 1,
borderColor: "#000000",
lineTension: 0,
},
]
},
options: {
title: {
display: false,
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
gridLines:
{
display: false
},
scaleLabel: {
display: true
}
}],
yAxes: [{
gridLines:
{
display: false
},
scaleLabel: {
display: true,
}
}]
}
}
});
</script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<html>
<body>
<div class="w3-row">
<div class="w3-col s3"><p></p></div>
<div class="w3-col s6" align="center"><canvas id="myChart" height="220"></canvas></div>
</div>
<div class="w3-row" align="center"><h2>Color Zone where the point X is located: </h2></div>
</body>
</html>
Here is CodePen:
My Sample Example: CodePen
The documentation of Fabric.js on animation mentions this onChange callback:
onChange: canvas.renderAll.bind(canvas)
However, when I try to substitute this with a custom function, the animation does not show. See this example; the down animation does not show, only the up animation. What is wrong with this code?
var canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.set({
hasControls: false,
selectable: false,
hoverCursor: 'default',
originX: 'center',
originY: 'center'
});
rect1 = new fabric.Rect({
left: 200,
top: 0,
width: 50,
height: 50,
fill: 'red',
opacity: 0
});
canvas.add(rect1);
var button01 = new fabric.Circle({
left: 20,
top: 20,
radius: 10,
fill: '#c0c0c0',
strokeWidth: 1,
stroke: '#808080',
hoverCursor: 'pointer'
});
canvas.add(button01);
button01.on('mousedown', function(options) {
animate_down()
});
var text1 = new fabric.Text("Animate", {
fontFamily: 'Arial',
fontSize: 12,
fill: 'black',
left: 58,
top: 20,
});
canvas.add(text1);
function animate_down() {
rect1.animate({
'top': 300,
'opacity': 1
}, {
onChange: function() {
canvas.renderAll.bind(canvas)
/* some other code */
},
onComplete: animate_up,
duration: 2000,
});
}
function animate_up() {
rect1.animate({
'top': 0,
'opacity': 0
}, {
onChange: canvas.renderAll.bind(canvas),
duration: 2000,
});
}
#canvas {
border:1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>
You need to call canvas.requestRenderAll(); inside your callback. As you are just binding canvas to canvas.renderAll, but never called. Docs
DEMO
var canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.set({
hasControls: false,
selectable: false,
hoverCursor: 'default',
originX: 'center',
originY: 'center'
});
rect1 = new fabric.Rect({
left: 200,
top: 0,
width: 50,
height: 50,
fill: 'red',
opacity: 0
});
canvas.add(rect1);
var button01 = new fabric.Circle({
left: 20,
top: 20,
radius: 10,
fill: '#c0c0c0',
strokeWidth: 1,
stroke: '#808080',
hoverCursor: 'pointer'
});
canvas.add(button01);
button01.on('mousedown', function(options) {
animate_down()
});
var text1 = new fabric.Text("Animate", {
fontFamily: 'Arial',
fontSize: 12,
fill: 'black',
left: 58,
top: 20,
});
canvas.add(text1);
function animate_down() {
rect1.animate({
'top': 300,
'opacity': 1
}, {
onChange: function() {
canvas.requestRenderAll();
/* some other code */
},
onComplete: animate_up,
duration: 2000,
});
}
function animate_up() {
rect1.animate({
'top': 0,
'opacity': 0
}, {
onChange: canvas.requestRenderAll.bind(canvas),
duration: 2000,
});
}
#canvas {
border:1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>