I'm working on a script that will move a layer, right, left, up, or down. This depends upon which edge of the layer is inside the canvas.
I've managed to get the layer moving left and right (x-axis) using bounds[0] and bounds[2].
But when I try to get it to move up or down, it still moves left/right. Is it the bounds number I've got wrong?
var Y1 = bounds[3].as('px');
var Height = app.activeDocument.height.as('px');
//move down
if (Y1 < Height) {
activeDocument.activeLayer.translate(Height-Y1);
}
The first thing you probably want to do in a situation like this is to check the documentation. For .translate() we can find the following:
so to move horizontally we would use deltaX and to move vertically deltaY, in your code you're giving to .translate() only deltaX, so as expected your layer is being moved horizontally. To fix this pass 0 as a first argument and your Height-Y1 as a second one:
activeDocument.activeLayer.translate(0, Height - Y1);
Related
Hi I'm looking at the Scroll Drawing examples over on W3Schools and CSS Tricks. Both examples use Javascript and an SVG path to "draw" an element on scroll. They also both base the length of the drawn path according to how much the document body has been scrolled (scroll percentage). Here's how they calculate their scroll percentage:
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
Does anyone know how I can change the scroll percentage so that it calculates based on how far down a div has been scrolled?
Here's a Fiddle where I tried using the y of the div's boundingClientRect() divided by the window.innerHeight. This probably doesn't make sense because it seems to be drawn over and over again, but I'm trying to figure out the math. The SVG in this case is sticky to the div (instead of fixed). This only kind of works in that the SVG path is drawn on scroll, but it's drawn over and over again until you've scrolled past the height of the div.
My desired outcome is for it to be drawn once completely when scrolled 50% down the div and stay drawn for scrolling the remaining 50% of the div.
I hope this makes sense. Thanks for your help in advance! Any references would help too in terms of JS math and logic!
Also, for the SVG itself, do you know which end of the path is the one that starts?
Okay, I figured this out. Here's the complete fiddle
The math for calculating the scroll percentage: get the amount that the window has scrolled and divide by the height of the div (that the SVG is in). You then want to divide this in half so that the drawing completes halfway before div finishes scrolling:
var svgContainer = document.getElementById("svg-container");
var svgContainerRect = svgContainer.getBoundingClientRect();
var svgDivHeight = svgContainerRect.height;
var windowScroll = window.pageYOffset;
var scrollPercent = windowScroll / svgDivHeight *2;
Then, for the drawing to remain "drawn" after scrolling halfway through the div, throw the "drawing function" into an "if". This stops drawing once the scroll percentage reaches 1 (reaching halfway down the page):
if (scrollPercent < 1) {
//draw the length of SVG path according to the scroll
var draw = length * scrollPercent;
// Reverse the drawing (when scrolling upwards)
triangle.style.strokeDashoffset = length - draw;
} else {
var still = length;
}
The only quirk is that when the drawing is reversed (when you scroll up and then scroll back down), it seems to not complete all the way, like there's a bit of length missing. More to figure out, but the main function is there.
I guess it just took me a while to figure out the simple math. Hope this can help someone in the future.
I'm working on a script that will move a layer, right, left, up, or down. This depends upon which edge of the layer is inside the canvas.
I've managed to get the layer moving left and right (x-axis) using bounds[0] and bounds[2].
But when I try to get it to move up or down, it still moves left/right. Is it the bounds number I've got wrong?
var Y1 = bounds[3].as('px');
var Height = app.activeDocument.height.as('px');
//move down
if (Y1 < Height) {
activeDocument.activeLayer.translate(Height-Y1);
}
The first thing you probably want to do in a situation like this is to check the documentation. For .translate() we can find the following:
so to move horizontally we would use deltaX and to move vertically deltaY, in your code you're giving to .translate() only deltaX, so as expected your layer is being moved horizontally. To fix this pass 0 as a first argument and your Height-Y1 as a second one:
activeDocument.activeLayer.translate(0, Height - Y1);
I'm animating the height of a drawRoundedRect instance, however, because it starts drawing from the upper left corner, it's animating from top to bottom, and I need it to start from the bottom.
Is it possible to flip my graphics instance (I tried by setting the scale to inverse, but this doesn't render anything, perhaps it only works on sprites), or to start drawing a rounded rectangle from the bottom?
EDIT:
Okay so I found out it's possible to animate my height going in to the other direction by just multiplying my interpolated value by -1:
graphics.drawRoundedRect(
x,
y,
barsWidth,
interpolatedHeight * -1,
10
);
However, now the radius isn't working anymore, it's just drawing square rectangles..
TIA!
I am not entirely sure that I did understand the question but if a got it right, all you need to do is to change the pivot of the rectangle you are animating. In your case, pivot.y should be equal to the rectangle's height rectangle.pivot.y = rectangle.height. After you change the pivot you also need to position it /the rectangle/ accordingly, so it could retain its visual position rectangle.y += rectangle.pivot.y
a simple demo https://jsfiddle.net/4L1od09n/23/
I am working on some image viewing tools in KineticJS. I have a rotate tool. When you move the mouse over an image, a line appears from the centre of the image to the mouse position, and then when you click and move, the line follows and the image rotates around that point, in sync with the line. This works great.
My issue is, I have the following set up:
Canvas->
Stage->
Layer->
GroupA->
GroupB->
Image
This is because I draw tabs for options on GroupA and regard it as a container for the image. GroupB is used because I flip GroupB to flip the image ( and down the track, any objects like Text and Paths that I add to the image ), so that it flips but stays in place. This all works well. I am also hoping when I offer zoom, to zoom groupb and thus zoom anything drawn on the image, but for groupA to create clipping and continue to support drag buttons, etc.
The object I am rotating, is GroupA. Here is the method I call to set up rotation:
this.init = function(control)
{
console.log("Initing rotate for : " + control.id());
RotateTool.isMouseDown = false;
RotateTool.startRot = isNaN(control.getRotationDeg()) ? 0 : control.getRotationDeg();
RotateTool.lastAngle = control.parent.rotation() / RotateTool.factor;
RotateTool.startAngle = control.parent.rotation();
this.image = control.parent;
var center = this.getCentrePoint();
RotateTool.middleX = this.image.getAbsolutePosition().x + center.x;
RotateTool.middleY = this.image.getAbsolutePosition().y + center.y;
this.image.x(this.image.x() + center.x - this.image.offsetX());
this.image.y(this.image.y() + center.y - this.image.offsetY());
this.image.offsetX(center.x);
this.image.offsetY(center.y);
}
getCentrePoint is a method that uses trig to get the size of the image, based on the rotation. As I draw a line to the centre of the image, I can tell it's working well, to start with. I've also stepped in to it and it always returns values only slightly higher than the actual width and height, they always look like they should be about what I'd expect, for the angle of the image.
Here is the code I use on mouse move to rotate the image:
this.layerMouseMove = function (evt, layer)
{
if (RotateTool.isRotating == false)
return;
if (!Util.isNull(this.image) && !Util.isNull(this.line))
{
if (Item.moving && !RotateTool.isRotating)
{
console.log("layer mousemove item moving");
RotateTool.layerMouseUp(evt, layer);
}
else
{
var pt = this.translatePoint(evt.x, evt.y);
var x = pt.x;
var y = pt.y;
var end = this.getPoint(x, y, .8);
RotateTool.line.points([this.middleX, this.middleY, end.x, end.y]);
RotateTool.line.parent.draw();
RotateTool.sign.x(x - 20);
RotateTool.sign.y(y - 20);
var angle = Util.findAngle({ x: RotateTool.startX, y: RotateTool.startY }, { x: x, y: y }, { x: RotateTool.middleX, y: RotateTool.middleY });
var newRot = (angle) + RotateTool.startAngle;
RotateTool.image.rotation(newRot);
console.log(newRot);
}
}
}
Much of this code is ephemeral, it's maintaining the line ( which is 80% of the length from the centre to my mouse, as I also show a rotate icon, over the mouse.
Sorry for the long windedness, I'm trying to make sure I am clear, and that it's obvious that I've done a lot of work before asking for help.
So, here is my issue. After I've rotated a few times, when I click again, the 'centre' point that the line draws to, is way off the bottom right of my screen, and if I set a break point, sure enough, the absolute position of my groups are no longer in sync. This seems to me like my rotation has moved the image in the manner I hoped, but moved my group off screen. When I set offsetX and offsetY, do I need to also set it on all the children ? But, it's the bottom child I can see, and the top group I set those things on, so I don't really understand how this is happening.
I do notice my image jumps a few pixels when I move the mouse over it ( which is when the init method is called ) so I feel like perhaps I am just out slightly somewhere, and it's causing this flow on effect. I've done some more testing, and my image always jumps slightly up and to the right when I move the mouse over it, and the rotate tool continues to work reliably, so long as I don't move the mouse over the image again, causing my init method to call. It seems like every time this is called, is when it breaks. So, I could just call it once, but I'd have to associate the data with the image then, for the simple reason that once I have many images, I'll need to change my data as my selected image changes. Either way, I'd prefer to understand and resolve the issue, than just hide it.
Any help appreciated.
I would appreciate your help with the following issue: I want to use CSS3 transforms in order to center the view-port of the browser around the position of a mouse click.
Please have a look at my commented example at http://jsfiddle.net/XjpdU/.
The problem that I have is that the translation works fine only on the first click. After the first click the distance between the center of the view-port and the mouse click position seems to be computed correctly, but the translation seems to jump just anywhere.
I have tried to explicitly set 'transform-origin' (-webkit-translate-origin in my example) to the position of the last click (i.e., the current center of the view-port) but it seems that with 'translate' the 'transform-origin' directive simply gets ignored.
Thanks for helping out!y
Yep, transform-origin has no effect on the translation. It works like this:
Start with the identity matrix.
Translate by the computed X, Y and Z values of ‘transform-origin’
Multiply by each of the transform functions in ‘transform’ property in turn
Translate by the negated computed X, Y and Z values of ‘transform-origin’
http://www.w3.org/TR/css3-transforms/#transform-rendering
What you could do is remember the translate, and add the newly calculated one to it, this will cause a relative translation starting from the previous point.
x = prevX = prevX + newX
y = prevY = prevY + newY
http://jsfiddle.net/XjpdU/1/