Getting the Jcrop coordinates back into Jcrop through javascript variable? - javascript

If I set a variable like this:
var coords = jcrop_api.tellSelect();
It returns my current Jcrop selections coordinates in an x,y,x2,y2,h,w format.
Now if I want to set my coordinates back to that, I could go:
jcrop_api.animateTo(coords)
But the animateTo function only takes an array of 4, [x, y, w, h]
When I try to do the above way, it eventually breaks the code.
So how do I change my variable coords to fit this format?
Thanks

The API functions you mention at least at the 0.9.12 version of the plugin..
jcrop_api.tellSelect() returns an object like this:
{
x: 0,
y: 0,
x2: 10,
y2: 10,
w: 10,
h:10
}
and jcrop_api.animateTo needs one array like [x,y,x2,y2], so, try this:
var c = jcrop_api.tellSelect();
jcrop_api.animateTo([c.x,c.y, c.x2, c.y2]);

Related

Why does this expression equal NaN, but equal a valid answer when defined somewhere else?

So I'm writing a game on JS Canvas and I'm making my own GUI from scratch. To do so, I made a button object with fields x, y, width, height and intersects(click_event). For some reason, when I directly put this expression for x, it returns NaN even though the expression works everywhere else.
It's just a simple game on Canvas. I know I could probably use some dirty trick to work around it, but I want to keep my code clean. I just don't understand why this wouldn't work.
var button = {
height:80,
width:200,
x:canvas.width/2 - this.width/2, //this is the problem
y:200,
//other stuff
};
console.log(button.x); //this prints "NaN"
console.log(canvas.width/2 - button.width/2); //prints correct num
The canvas width is 1000, so 1000 / 2 - 200 / 2 should equal 400, which it does when called inside console.log.
But when I put it inside button.x it evaluates to NaN.
You can't access/reference a property within a object during initialization.
So this will never work:
var myObject = {
height: 2
doubleHeight: 2 * this.height
}
One solution would be to add the poperty after you have initialized the object. Your code would like this:
var button = {
height:80,
width:200,
y:200,
//other stuff
};
button.x = canvas.width/2 - button.width/2
Another solution would be to wrap inside function
function createButton(height, width, canvasWidth) {
return {
height: height,
width: width,
y: width,
x: canvasWidth/2 - width/2
}
}
It can be achieved by using constructor function
var button = new function() {
this.height=80;
this.width=200;
this.x = canvas.width/2 - this.width/2;
this.y=200;
}

Animating the drawing of a line in the canvas with fabric.js

I can draw a line in the canvas using:
var myLine = new fabric.Polyline([{x:200,y:200},{x:200,y:200}])
var canvas = new fabric.Canvas('c');
canvas.add(myLine);
However, I want to animate the drawing. I tried:
myLine.animate("points","[{x:200,y:200},{x:10,y:10}]",{onChange: canvas.renderAll.bind(canvas)})
But it's not working, and I couldn't see any way to animate the drawing of the line using fabric.js - I know I can use canvas methods directly but I am curious is fabric.js offers something more concise.
I made a jsFiddle based on http://fabricjs.com/polygon-animation/ and I change it into a fabricjs Polyline. You can set the start and end values from here:
var startPoints = [
{x: 1, y: 1},
{x: 2, y: 2}
];
var endPoints = [
{x: 1, y: 1},
{x: 200, y: 200}
];
No solution suited me so far so here a js-fiddle with what i came up with. Its based on the prev solution by Nistor Christian:
I Made a simple function which accepts the Canvas (in case you want to use this on more than one canvas), color, the original Line-Koordinates (StartXY, EndXY) and the new Line-Koordinates (NewStartX,NewStartY).
function animateLine(canvasInstance,color,
startX,startY,endX,endY,
newStartX, newStartY,newEndX,newEndY)

How are objects stored within a Kinetic.Layer within Kineticjs?

I am currently creating a grid of Triangles using a for loop using a predetermined set of coordinates in a separate array.
Like so:
function createTri(x, y, z, a) {
var tri = new Kinetic.RegularPolygon({
id: a,
x: x,
y: y,
sides: 3,
radius: 15,
rotation: z,
fillRed: 17,
fillGreen: 17,
fillBlue: 17,
closed: true,
shadowColor: '#5febff',
shadowBlur: 5,
shadowOpacity: 0.18
});
layer.add(tri);
}
for (var i = 0; i < pax.length; i++){
for (var j = 0; j < pax[i].length; j++){
createTri(pax[i][j][0],pax[i][j][1],pax[i][j][2],(i+'')+(j+''));
};
}
However when I try to return a console.log() of a specfic id from the layer container, I am getting nothing but code instead of an id number.
Im not entirely sure if Im calling it wrong for Kinetic, or calling it wrong in general.
So I guess I need to know what the normal way to call the object by the id property would be, or how to properly call it from a Kinetic.Layer.
Edit: to expound, how im trying to call it is defined within the Kinetic documentation as node.find('selector);, so when attempting to find by id, I am trying to log to the console: console.log(layer.find('#1674')); However when I do this, the console logs a prototype object with all possible associated functions instead of the object Im trying to call.
I suspect the source of your problem is that the id of your triangle object is not what you expect it to be.
You should see something like this (in Chrome):
[Kinetic.RegularPolygon, each: function, toArray: function, _init: function, _clearCache: function, _getCache: function…]
Are you seeing this?
[each: function, toArray: function, _init: function, _clearCache: function, _getCache: function…]
That's what I get when I provide a invalid id to the layer's find method.
Here's a fiddle to illustrate: http://jsfiddle.net/klenwell/Tn5bm/

conversion of string into array

in my user.data.crop_position value is "[ 100, 100, 200, 200 ]";
var crop_position=user.data.crop_position.slice(1,user.data.crop_position.length-2);
$('#cropbox').Jcrop({
setSelect: crop_position,
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
doing this my jcrop is not select at set postion what can i do
it is due to the string i am passing in how can i remove this ,
i know this is silly question but i got these kind of problem many time also please suggest me that in future these kind of problem dont came.
regards
rahul
The Jcrop Manual says that setSelect takes an array, not a string.
[100, 100, 200, 200] // rather than
'[100, 100, 200, 200]'
If you can't change the input format, at least you can parse it using $.parseJSON before passing it to Jcrop:
var crop_position = $.parseJSON(user.data.crop_position);
Edit: If necessary (double quotes are actually present in the string value), you can use $.parseJSON twice, first to decode the encoded string value and second to decode the array within the encoded string:
var crop_position = $.parseJSON($.parseJSON(user.data.crop_position));
Or just strip off the surrounding double quotes before $.parseJSON:
var crop_position = $.parseJSON(user.data.crop_position.slice(1, -1));
setSelect - array [ x, y, x2, y2 ] Set an initial selection area
So you need an array not a string for setSelect. Why don't you make user.data.crop_position an array itself? If there is no way to change the representation you can do the conversion with a simple algorithm:
var pos = '"[ 100, 100, 200, 200 ]"'; // user.data.crop_position
var crop_position = pos.replace(/["\[\] ]/g, '').split(',');
for (var i = crop_position.length; i--;) {
crop_position[i] = +crop_position[i];
}
Now you've got an array of values instead of a string.

Raphael-JS: Rect with one round corner

paper.rect(0, 0, settings.width, settings.height, settings.radius);
Creates a nice rectangle with rounded corners. Is it possible to create a rectangle with just one round corner?
If you use Raphael JS:
Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){
var array = [];
array = array.concat(["M",x,r1+y, "Q",x,y, x+r1,y]); //A
array = array.concat(["L",x+w-r2,y, "Q",x+w,y, x+w,y+r2]); //B
array = array.concat(["L",x+w,y+h-r3, "Q",x+w,y+h, x+w-r3,y+h]); //C
array = array.concat(["L",x+r4,y+h, "Q",x,y+h, x,y+h-r4, "Z"]); //D
return this.path(array);
};
To have a rectangle with only the upper-right corner rounded
var paper = Raphael("canvas", 840, 480);
paper.roundedRectangle(10, 10, 80, 80, 0, 20, 0, 0);
Source and online example: http://www.remy-mellet.com/blog/179-draw-rectangle-with-123-or-4-rounded-corner/
The rounded corners feature maps directly on to the underlying SVG rx and ry attributes, they apply to whole rectangles and so there's no possibility of just setting it on a single corner.
This blog post discusses an approach in SVG of basically covering up the corners you don't want rounded. Although his examples appear to be offline now, the approach should be fairly easy to reverse engineer into SVG.
An alternative approach would be to use a path instead of a rectangle object and draw the whole outline yourself. The syntax is a little obscure but is easy enough once you understand what's going on. Try Jakob Jenkov's SVG Path tutorial for an introduction.
Very old question, here's a better path. I converted it to relative coordinates, which should be better at animations...
Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){
var array = [];
array = array.concat(["M",x+r1,y]);
array = array.concat(['l',w-r1-r2,0]);//T
array = array.concat(["q",r2,0, r2,r2]); //TR
array = array.concat(['l',0,h-r3-r2]);//R
array = array.concat(["q",0,r3, -r3,r3]); //BR
array = array.concat(['l',-w+r4+r3,0]);//B
array = array.concat(["q",-r4,0, -r4,-r4]); //BL
array = array.concat(['l',0,-h+r4+r1]);//L
array = array.concat(["q",0,-r1, r1,-r1]); //TL
array = array.concat(["z"]); //end
return this.path(array);
};

Categories

Resources