I can't figure out how to get the current rotation angle of an arch in jCanvas. layer.rotate only seems to provide me with the original setting of rotate, when I'd really like to change its behavior when it hits a certain angle.
I have an example setup on jsfiddle to demonstrate the problem.
Any insight would be appreciated.
are you looking for this value $('#rot').val()
while (i < 1000) {
setTimeout(function() { rotate() }, 1000);
alert( $('#rot').val());
i += 1;
}
The animateLayer() and animateLayerGroup() methods support the same alternate syntax as jQuery's animate() method, which allows for a step callback:
// Cache canvas element
var $canvas = $("canvas");
// Draw and animate
$canvas.drawArc({
layer: true,
name: 'arcy',
fillStyle: "#000",
x: 100, y: 100,
radius: 50,
start: 135, end: 45
});
$canvas.animateLayer('arcy', {
rotate: 360
}, {
// Use the step callback to run a function on every frame
step: function(now, fx, layer) {
console.log(layer.rotate);
}
});
Related
So I'm trying to give the feel of smooth movement when reassigning the paper.view.center coordinates. The center object doesn't have a tweenTo() method. This is what I've tried using Tween.js:
let smooth = new TWEEN.Tween(paper.view.center).to({
x: 650,
y: 270
}, 900).easing(TWEEN.Easing.Cubic.Out).start();
Since it's a Point object reassigning the x and y values don't actually change the coordinates, because the proper way of reassiging it is to use another Point object (new paper.Point()). How could I tween the continuously new creation of a Point object?
I think that a simple way of achieving what you want is animating the active layer position.
Here's a sketch demonstrating a possible implementation.
const circle = new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
circle.clone().translate(100)
project.activeLayer.tweenTo(
{ position: { x: 50, y: 50 } },
{ duration: 700, easing: 'easeInOutQuad' }
);
I'm trying to make an event that changes my shapes stroke color for 5 seconds when a button is clicked, and then the shape returns to original color after the duration.
I am able to do this with clearing the entire stage and redrawing new shapes (which resets their position), but I can't figure it out with the current shapes.
Q. What's the best way to approach making a change to a shapes color, during a Tween?
I was also curious if there's a better way to handling tweening the shapes width? Currently I am relying on ScaleX and ScaleY - but this also changes the stroke's size - which is not desired.
JS Fiddle
HTML
<button id="change">Click to Change Color</button>
<canvas id="demoCanvas" width="500" height="500"></canvas>
JS
var stage,
circle;
function init() {
stage = new createjs.Stage("demoCanvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
function createCircle(){
circle = new createjs.Shape().set({name:"circle"});
circle.graphics.setStrokeStyle(1).beginStroke("#000").beginFill( "#FFF" ).drawCircle(0, 0, 20);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
createjs.Tween.get(circle, {loop: true})
.to({x: 225, y: 225}, 1000, createjs.Ease.getPowInOut(1))
.to({x: 100, y: 100}, 1000, createjs.Ease.getPowInOut(1));
circle2 = new createjs.Shape().set({name:"circle"});
circle2.graphics.setStrokeStyle(1).beginStroke("#000").beginFill( "#FFF" ).drawCircle(0, 0, 20);
circle2.x = 400;
circle2.y = 400;
stage.addChild(circle2);
createjs.Tween.get(circle2, {loop: true})
.to({scaleX: 2, scaleY: 2, x: 425, y: 125}, 1000, createjs.Ease.getPowInOut(1))
.to({scaleX: 1, scaleY: 1, x: 400, y: 400}, 1000, createjs.Ease.getPowInOut(1));
stage.update();
}
$( "#change" ).click(function() {
// change color
});
$(document).ready(function() {
init();
createCircle();
});
There are a few questions in this post, so I will try to answer them all:
First, a solution to most of your issues is Graphic commands. Commands provide a simple way to store graphic instructions, and change them later. Here is a simple example:
var shape = new createjs.Shape();
var colorCmd = shape.graphics.beginFill("red").command;
var rectCmd = shape.graphics.drawRect(0,0,100,100).command;
// Later
colorCmd.style = "blue";
rectCmd.w = 200;
stage.update(); // Remember to update the stage after changing properties
You can read more about commands on the createjs blog. All commands and their properties are documented in the EaselJS docs.
Change a color: I outlined this in the example above, but the short answer is to adjust the style property of a fill command. If you want to change it instantly, you can just set up a Tween.call:
Example:
createjs.Tween.get(circle, {loop: true})
.to({x: 225, y: 225}, 1000, createjs.Ease.getPowInOut(1))
.call(function(tween) {
colorCmd.style = "rgba(0, 0, 255, 0.5)"; // Change to 50% blue
})
.to({x: 100, y: 100}, 1000, createjs.Ease.getPowInOut(1));
If you want to tween the color, then you could check out the ColorPlugin, which is currently in a "Plugins" branch of TweenJS: https://github.com/CreateJS/TweenJS/tree/Plugins/extras/plugins
// Tween the color from its current value to blue.
// Note that only hex, short hex, HSL, and RGB formats are supported.
createjs.Tween.get(colorCmd).to({style:"#0000ff"});
Change the size: The example above also shows how to modify the values of a drawRect call. You can do the same with any other draw command (including moveTo, lineTo, polyStar, etc).
Scaling also works, and if you want to not scale the stroke, just set the ignoreScale parameter on the stroke style.
shape.graphics.setStrokeStyle(1, null, null, null, true);
I want to change this jsfiddle jsfiddle. It uses jQueryCountDown (http://plugins.jquery.com/countdown360/)
It currently rotates an outer ring, by one increment every second, but this shows as an anti-clockwise rotation of the ring as it counts downs.
I want the countdown to still rotate each second, but the direction of the outer ring rotation should be clockwise (currently the ring rotates anti-clockwise). Please see the example:
Example code:
var countdown = $("#countdown").countdown360({
radius: 60,
seconds: 20,
label: ['sec', 'secs'],
fontColor: '#FFFFFF',
autostart: false,
onComplete: function () {
console.log('done');
}
});
countdown.start();
$('#countdown').click(function() {
countdown.extendTimer(2);
});
That plugin is hard-coded to rotate anti-clockwise. I updated the original plugin so that it now has an option to have clockwise: true.
The new demo looks like this:
This example has one running clockwise and the second running normally (anti-clockwise):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/gs3WY/246/
In the defaults I added clockwise:
defaults = {
...[snip]...
clockwise: false
};
In the start method I made it conditionally draw the "stroke" (the outer ring):
start: function () {
...[snip]...
this._drawCountdownShape(Math.PI * 3.5, !this.settings.clockwise);
...[snip]...
},
and in the _draw method I added a conditional calculation of the angle. Also when the timer ends, it conditionally draws the outer ring again based on the clockwise flag (previously it always redrew the entire outer ring before rendering the changes):
_draw: function () {
var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000);
if (this.settings.clockwise) {
var endAngle = (((Math.PI * 2) / this.settings.seconds) * secondsElapsed) - (Math.PI * .5);
} else {
var endAngle = (Math.PI * 3.5) - (((Math.PI * 2) / this.settings.seconds) * secondsElapsed);
}
this._clearRect();
if (secondsElapsed < this.settings.seconds) {
this._drawCountdownShape(Math.PI * 3.5, false);
this._drawCountdownShape(endAngle, true);
this._drawCountdownLabel(secondsElapsed);
} else {
this._drawCountdownShape(Math.PI * 3.5, this.settings.clockwise);
this._drawCountdownLabel(this.settings.seconds);
this.stop();
this.settings.onComplete();
}
}
You simply add a clockwise: true when you create the countdown:
var countdown = $("#countdown").countdown360({
radius: 60,
seconds: 20,
label: ['sec', 'secs'],
fontColor: '#FFFFFF',
autostart: false,
clockwise: true, // <<<<< Added this
onComplete: function () {
console.log('done');
}
});
i got some problems with understanding kinetic.js (the documentation is horrible for newbies...) i hope i can explain it with my bad english.
Problem 1: Everytime when i #reset my canvas it is not really resetting it. its more like its pushing another background image over the actual canvas and when i click on it it jumps back to the original...
function clearCanvas() {
context.clearRect(0, 0, 1000, 1000); //whole canvas
context.drawImage(buehneObj,0,0); //redraw the main background image
}
and call it with:
reset = document.getElementById('reset');
document.getElementById('reset').onclick =function(){clearCanvas();
}
Problem 2: the slider i build for scaling the image is not working at all but i dont see the problem... ...the variables are global and if i test alert it i see that values are existing...
standard jquery slider:
$('#scaleslider').slider({
animate: "fast",
step: 0.1,
value: 1,
min: 0.1,
max: 1,
slide: function(event,ui){groesse = ui.value} //global variable
});
i made it hidden(display:none) and on click "block"
var scaleslider = document.getElementById('scaleslider').style;
document.getElementById('resize').onclick =function(){ scaleslider.display ="block";}
and here's how kinetic parts look like (dragMotiv is my first start image) "groesse" is the variable for my x and y slider value(they can us the same so it scales correct):
var dragMotiv = new Kinetic.Image({
image: imageObj,
x: 250,
y: 300,
width: 330,
height: 263,
rotationDeg: 0,
scale: { x:groesse, y:groesse },
draggable: true,
dragBoundFunc: function(pos) {
var newY = pos.y < 290 ? 290 : pos.y > 305 ? 305 : pos.y;
var newX = pos.x < 250 ? 250 : pos.x > 390 ? 390 : pos.x;
return {
x: newX,
y: newY
};
}
});
Problem 3: Saving is not possible at all.
i uploaded it to my server to let you guys take a look at it. i know that there is one little thingy that i just dont see(i hope so).
http://manufaktur13.de/playground/canvas_kinetic.html
I think you should not clear the canvas, instead you should keep record what you have drown and remove those items, and redraw the layer.
I have created a gauge using jsgauge plugin
What I am not able to do is to control the speed of the needle. It should move to the assigned value a bit slower than the default speed. The needle should also start from 0.
The fiddle for this is http://jsfiddle.net/aryan7987/h45Tr/2/
Query(document).ready(function(){
jQuery("#example")
.gauge({
min: 0,
max: 100,
label: 'EMPLOYEE',
startangle: 0,
bands: [{color: "#ff0000", from: 90, to: 100}]
})
.gauge('setValue', 59);
});
One of solutions is to use setInterval function and increase gauge value step by step with needed delay like this:
jQuery(document).ready(function(){
var g = jQuery("#example")
.gauge({
min: 0,
max: 100,
label: 'RPM',
bands: [{color: "#ff0000", from: 90, to: 100}]
});
var m = 0;
var timer = window.setInterval(function()
{
m++;
g.gauge('setValue', m);
if (m==58)
{
clearInterval(timer);
}
}, 200);
});
The code is quite dirty but you should get a point. Also here working fiddle.
Unfortunately it looks like the speed is hardcoded by defining the delta for each frame. Here is an monkey patched version to change the speed see this jsfiddle
The problem line is:
increment = Math.max(Math.abs( that.settings.pointerValue - pointerValue ) / 8, 3);