Raphael-free-transform looses scale value - javascript

in the following code re-scaling of the square object goes wrong:
after clicking the button (which apply y-scale factor and make a rectangle out of our square) object displays correct BUT if you touch handles after that the previous scale values erase and square displays again.
I want to be able to make rectangle in a code and re-scale it uniformly using handles afterwards.
How to solve this problem?
<html>
<head>
<title></title>
<script src="scripts/raphael.js"></script>
<script src="scripts/raphael.free_transform.js"></script>
</head>
<body>
<button id="btn" onclick="onClick()">apply scale</button>
<script>
var r = Raphael(100, 0 , 300, 400);
var square = r.rect(100,150, 100, 100).attr({ fill: "#aaa", stroke: "black", opacity: 0.5 });
var ft = r.freeTransform(square, {}, function () {});
ft.setOpts({
attrs: { fill: 'white', stroke: '#000' },
drag: false,
keepRatio: ['axisX', 'axisY'],
size: 5,
scale: ['axisX', 'axisY'],
rotate:false
});
function onClick() {
ft.attrs.scale.y = 2;
ft.apply();
}
</script>
</body>
</html>
jsfiddle is here

When you scale y by 2, it violates keepRatio: ['axisX', 'axisY'] rule. So either you change
`keepRatio: false,`
or you scale by keeping the ratio.
edit:
You can change the aspect ratio by ft.attrs.ratio = 1/2 on button click. see updated js fiddle
To get js.fiddle working i added the line r.setViewBox(0, 0, 300, 400, true);
http://jsfiddle.net/Z2cqT/18/

Related

How to add the value with Gauge.js

I'm actually working with gauge.js. It's working correctly but I would like to add the value just as legend at the bottom of the canvas. In my example I just want to display 41%.
Do you know a way to achieve this part ?
Here is the jsfiddle : http://jsfiddle.net/mopaetxp/
<canvas id="foo"></canvas>
var opts = {
lines: 12, // The number of lines to draw
angle: 0, // The length of each line
lineWidth: 0.1, // The line thickness
pointer: {
length: 0.9, // The radius of the inner circle
strokeWidth: 0.035, // The rotation offset
color: '#000000' // Fill color
},
limitMax: 'false', // If true, the pointer will not go past the end of the gauge
colorStart: '#006EAB', // Colors
colorStop: '#006EAB', // just experiment with them
strokeColor: '#FFFFFF', // to see which ones work best for you
generateGradient: true
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.animationSpeed = 10; // set animation speed (32 is default value)
gauge.set(41); // set actual value
Thanks a lot.
Use HTML LABEL Tag.check the demo here
Use in HTML:
<canvas id="canvas" class="canvas-speedometer"></canvas>
<span id="gauge-value"></span>
And in your javascript:
gauge.setTextField(document.getElementById('gauge-value'));

Kinetic canvas with user text field input

I've pulled out most of my hair trying to find a solution to no avail.
I know this must be easy but being a javascript neophyte I can't seem to wrap my head around it and am hoping someone can help me out!!!
I'm trying to create a simple canvas element that has an image with text (with wrapping) on top of it. The text will come from a text field outside of the canvas (nothing fancy). I've seen where the canvas populates with the text as it is input into the text field which is what I'm looking for (no submit button). Eventually, I will need to add 2 additional text fields with different information, doing the same thing but for right now I'd be happy to get one to work!
The kinetic text tutorial found here (http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ - code below) would be perfect if I could only figure out how to get the "complex text" to be pulled from a regular text input field instead of being hard coded!
Any help would be greatly appreciated!
Working code without input text field:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 220
});
var layer = new Kinetic.Layer();
var simpleText = new Kinetic.Text({
x: stage.getWidth() / 2,
y: 15,
text: 'Simple Text',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green'
});
// to align text in the middle of the screen, we can set the
// shape offset to the center of the text shape after instantiating it
simpleText.setOffset({
x: simpleText.getWidth() / 2
});
// since this text is inside of a defined area, we can center it using
// align: 'center'
var complexText = new Kinetic.Text({
x: 100,
y: 60,
text: 'COMPLEX TEXT\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.',
fontSize: 18,
fontFamily: 'Calibri',
fill: '#555',
width: 380,
padding: 20,
align: 'center'
});
var rect = new Kinetic.Rect({
x: 100,
y: 60,
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
width: 380,
height: complexText.getHeight(),
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10
});
// add the shapes to the layer
layer.add(simpleText);
layer.add(rect);
layer.add(complexText);
stage.add(layer);
</script>
</body>
</html>
Possible solution: to add one input field, set up event listener which fire on change of its value and then start drawing.
<body>
<div id="container"></div>
<input type="text" id='complexText' size="20"/>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script defer="defer">
var inputField = document.getElementById('complexText');
inputField.addEventListener('change', function() {
var inputText = this.value;
showText(inputText);
}, false);
function showText(inputText) {
*** here goes all your 'Kinetic' code ***
}
See example at jsBin.

kinetic.js change fill type of object after instantiation, after added to layer and scene, and in animation loop

I am attempting to change the fill style of a KineticJS Rect object after it has been instantiated, after being added to the layer and scene, and in the animation loop.
I am trying to toggle the fill type between a single color type to a linear gradient type based on a user button control in my main app file that renders the canvas.
I instantiate the object in a different file which is a class I wrote that instantiates a KineticJS Rect with a linear gradient fill initially in it's constructor like so:
function MyBackground(width,height,c1,c2,mode) {
this.width = width;
this.height = height;
this.color1 = c1;
this.color2 = c2;
this.mode = mode;
this.background = new Kinetic.Rect({
x: 0,
y: 0,
width: this.width,
height: this.height,
fillLinearGradientStartPoint: [0, 0],
fillLinearGradientEndPoint: [this.width, this.height],
fillLinearGradientColorStops: [0, this.color1, 1, this.color2]
});
this.getMode = function() { return this.mode; }; }
I then create an instance of this in the main file:
var myBack= new MyBackground(stageWidth,stageHeight,getRandomHexColor(),getRandomHexColor(),'dualColorLinearGradientStatic');
var background = myBack.getBackground();
myBack.setMode('singleColor');
I then add the background Rect to the layer, and the layer to the stage:
layer.add(background);
stage.add(layer);
I then start the animation loop code and after that the event handler that catches the button press to change the fill trying this inside:
myBack.setMode(bgmodeselected);
background = myBack.getBackground();
The app page loads fine showing the initial linear gradient fill. If I select that same mode of linear gradient and press the button control, it changes the colors as I desire maintaining the fill type of linear gradient. If I then switch the mode to single color fill and click the control button, that works too, changing the rect to a single color.
Here is what I have inside my class function to change the mode that makes that specifically work:
this.background.setFill(this.color1);
Inside that same function based on a conditional it should change the fill to linear gradient (and does this as long as its not changed to single color fill as above first)
this.background.setAttrs({
fillLinearGradientStartPoint: [0, 0],
fillLinearGradientEndPoint: [960, 600],
fillLinearGradientColorStops: [0, this.color1, 1, this.color2]
});
I've also tried within that same block:
this.background.setFillLinearGradientStartPoint(0, 0);
this.background.setFillLinearGradientEndPoint(960, 600);
this.background.setFillLinearGradientColorStops([0, this.color1, 1, this.color2]);
I know that the proper variables and values are being passed to the function and that the conditionals are working because it will change the fill mode type from its (as initially instantiated) linear gradient fill to a single color fill (which will continue working even as a different single color).
The problem is when I try to switch BACK to linear gradient fill it will not do so, or repaint/refresh at least despite it's calling this same function with the proper values. So, I suppose that my specific question is how can I change the fill style of a KineticJS Rect multiple times, from a single color fill back to a linear gradient fill after it has been already been added to the layer and stage and has an animation loop implemented?
This is my first question post so I hope that I am doing so properly; please inform me if I should be doing anything differently. Thanks.
Welcome to stackoverflow!
When you’re re-applying your gradient, be sure to clear out the solid color fill:
// clear the solid fill
this.setFill('');
// then apply the gradient fill
this.setFillLinearGradientStartPoint(-50);
this.setFillLinearGradientEndPoint(50);
this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/dmMF2/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
function draw(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var linearGradPentagon = new Kinetic.Rect({
x: 100,
y: 30,
width: 75,
height: 50,
fill:"red",
stroke: 'black',
strokeWidth: 4,
draggable: true
});
linearGradPentagon.on('mouseover touchstart', function() {
this.setFill('');
this.setFillLinearGradientStartPoint(-50);
this.setFillLinearGradientEndPoint(50);
this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);
layer.draw();
});
linearGradPentagon.on('mouseout touchend', function() {
this.setFill('red');
layer.draw();
});
layer.add(linearGradPentagon);
stage.add(layer);
}
draw();
</script>
</body>
</html>

spin.js doesn't seem to work/ appear

I'm attempting to use the spin.js library to display a loading animation. However, going off the spin.js developer example I can't seem to get it to work/ appear; this is apparent by the empty div tag when I open my html file in Firefox.
Here is my code (spinnertest.html):
<html>
<head>
<script src="spin.min.js">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById("spinner");
var spinner = new Spinner(opts).spin(target);
</script>
</head>
<body>
<div id="spinner">
</div>
</body>
Working code for those interested (requires jquery-1.9.0.min.js and spin.min.js in the same directory):
<html>
<head>
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById("spinner");
var spinner = new Spinner(opts).spin(target);
});
</script>
</head>
<body>
<div id="spinner">
</div>
</body>
I don't believe that code inside a script tag with a src attribute will execute. If you change your code to the following, does it work?
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = ...
...
// all the code that you currently have between <script> and
// </script> goes here
});
</script>
You have to initialize it in a DOM ready state, otherwise target will be null.
You should also have the include script in a separate script tag.
Using jquery...
$(function() {
var target = document.getElementById("spinner");
var spinner = new Spinner(opts).spin(target);
});

How to make a spinner work using Spin.js?

Hello guys,
I am new at JavaScript and after tons of research on the Internet and failed attempts on implementing a spinner I decided to ask you.
I am using Spin.js ( http://fgnass.github.com/spin.js/#v1.2.6 ). It seems to be an great tool, but I simply cannot make it work. My question is what I doing wrong? I cannot really figure it out. Any help will be much appreciated. Thank you so much.
Here is my piece of code:
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
function spinnerInit() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto', // Left position relative to parent in px
visibility: true
};
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts).spin(target);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnPerformSave').click(function () {
spinnerInit();
});
});
</script>
<div id="spinnerContainer" class="spinner" style="width: 100%; height: 150%;
position: absolute; z-index: 100; background-color: Gray;
left: 0; top: 0; bottom: 0;right: 0">
</div>
Try replacing
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
with
$('#spinnerContainer').after(new Spinner(opts).spin().el);
You need to append the html element the spin method creates to the dom
Here is an example to get you started http://jsfiddle.net/5CQJP/1/
I am not sure if this question ever got answered, but for those who are still looking for an answer:
I found out that I needed to move the javascript underneath the spinnerContainer div. I believe this would also work if you put the javascript in an onload event. Here is what I did:
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray;">
</div>
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
</script>
Here is my answer. Works great.
//Declare Script
<script src="Scripts/spin.js" type="text/javascript"></script>
<button id="btnSearchClick">Search</button>
//Displays Loading Spinner
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script type="text/javascript">
//On button click load spinner and go to another page
$("#btnSearchClick").click(function () {
//Loads Spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
//Go another page.
window.location.href = "http://www.example.com/";
});
</script>
Try this:
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts);
If you use jQuery:
$(target).html(spinner.el);
If not, as in the documentation:
target.innerHtml = '';
target.appendChild(spinner.el);
I didn't try this but it should work. If a problem occurs, just let me know.
I know this is way late but I am curious if you ever got this to work. I'll tell you one dumb thing I was doing for a bit and didn't realize it. I was making the spinner the same color as the background it would be showing up against and that's why I couldn't see it. Also I used JQuery as seen here https://gist.github.com/its-florida/1290439
Worked like a charm

Categories