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' }
);
Related
How to get The center point of the canvas object/rectangle. I use the Konvajs library for my small project. in the konva documentation said that you need to center the point to get good rotation.
http://konvajs.github.io/docs/animations/Rotation.html
Ex
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: 100,
height: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50 // how to solve this using formula so it will dynamic,
y: 25 // how to solve this using formula so it will dynamic
}
});
Rotating rectangular objects around their centers
By default, KonvaJS sets the rotation point of a rectangle at its top-left corner. Therefore to rotate from the center of the rectangle you must push the rotation point to the center of the rectangle.
You can do this by setting the offsetX=rectangleWidth/2 and offsetY=rectangleHeight/2
var yellowRectWidth=100;
var yellowRectHeight=50;
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: yellowRectWidth,
height: yellowRectHeight,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: yellowRectWidth/2,
y: yellowRectHeight/2
}
});
Rotating circular objects around their centers
By default, KonvaJS sets the rotation point of circular shapes at their centerpoints. Therefore to rotate from the center of circular shapes you won't have to set any offsets.
I'm just starting out the KineticJS library and been playing about with it creating shapes etc.. However, I'm struggling to create a custom circle with my own image in it. I have tried using the fillPattern but it doesn't scale/centre correctly at all. Am I meant to use my own circle image or a rectangle image and then let KineticJS take care of things?
Just to give a bit of background: What I want is 3 balls bouncing in and then settling in place.
Any advice is welcome.
Sorted it... needed the offset values
var ball = new Image();
ball.src = 'ball2.jpg';
ball.height = 230;
ball.width = 230;
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 1000
});
var circle = new Kinetic.Circle({
x: 300,
y: 300,
radius: 115,
fillPatternImage: ball,
fillPatternOffset :{
x: -115,
y: -115
}
});
var layer = new Kinetic.Layer();
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
ball.onload = function () {
stage.draw();
}
I have a canvas drawn in Fabric.js that i am adding a group of rectangles to, i want to limit the edges of those rectangles as a group to not go outside a certain area.
Imagine making a stripy t-shirt, the stripes are make by using a series of rectangles and i need to keep them to the shape of the t-shirt.
I think its better to clip the entire canvas to the shape of the t shirt, so anything i add to it remains within the t-shirt but i am stuck. So far i am only clip to basic circles and rectangles.
Thanks
You can just render a shape inside canvas.clipTo :)
I just loaded a random SVG shape in kitchensink and did this:
var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
As you can see, entire canvas is now clipped by that SVG shape.
You may also try this one: http://jsfiddle.net/ZxYCP/198/
var clipPoly = new fabric.Polygon([
{ x: 180, y: 10 },
{ x: 300, y: 50 },
{ x: 300, y: 180 },
{ x: 180, y: 220 }
], {
originX: 'left',
originY: 'top',
left: 180,
top: 10,
width: 200,
height: 200,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 0,
selectable: false
});
You can simply use Polygon to clip. Answer is based on #natchiketa idea in this question Multiple clipping areas on Fabric.js canvas
I've been trying to put scrollbars into my KineticJS app following the tutorial Kinetic have on the API. I have the scrollbars themselves appearing as they should, but I'm not sure what to do with the event listeners to actually get the stage or each of the layers to move so that the scrollbars actually move the view along.
var hscrollArea = new Kinetic.Rect({
x: 10,
y: $(window).height() - 30 - 80, // 80 to account for the fixed footer
width: $(window).width() - 40,
height: 20,
fill: "gray",
opacity: 0.3
});
var hscroll = new Kinetic.Rect({
x: 10,
y: $(window).height() - 30 - 80,// 80 to account for the fixed footer
width: 130,
height: 20,
fill: "orange",
draggable: true,
dragBoundFunc: function(pos) {
// TODO: Move stage or layers at this point
console.log("dragBoundFunc: " + this);
return {
x: pos.x,
y: this.getAbsolutePostion().y
};
},
opacity: 0.9,
stroke: "black",
strokeWidth: 1
});
var vscrollArea = new Kinetic.Rect({
x: $(window).width() - 30,
y: 10,
width: 20,
height: $(window).height() - 40 - 80,
fill: "gray",
opacity: 0.3
});
var vscroll = new Kinetic.Rect({
x: $(window).width() - 30,
y: 10,
width: 20,
height: 70,
fill: "orange",
draggable: true,
dragBoundFunc: function(pos) {
// TODO: Move stage or layers at this point
console.log("dragBoundFunc: " + this);
return {
x: this.getAbsolutePosition().x,
y: pos.y
};
},
opacity: 0.9,
stroke: "black",
strokeWidth: 1
});
Any help would be greatly appreciated :)
Thanks,
Becky
You can move stage or layer when your scrollbar(rectangle) is dragged. i.e,
stage.move(50,50);
stage.draw();
stage.move(-50,-50);
stage.draw();
I would recommend placing the objects you wish to scroll into their own group and position the group accordingly, rather than trying to position layers or the stage. The size of the group would be the (axis-aligned) bounding box of all the objects within the group. You can use the size of the group and compare it against the size of the stage to get a ratio for width and height. These ratios would be used to help calculate sizes for horizontal and vertical scroll bars (the bars being what get dragged to create a scroll effect). The ratio would also be used to determine when to show and hide the scroll bar areas. The difference in sizes would help in determining how to position the group within the stage.
I have the following circles in my game. The player drags them into different locations in the game. When the player selects, play again, I want the shapes to go back to the original position stated in the init function. How should I go about this? Thank you.
stage = new Kinetic.Stage({
container: "container",
width: 900,
height: 550
});
shapes = new Kinetic.Layer();
function init() {
circle1 = new Kinetic.Circle({
x: stage.getWidth() / 3.2,
y: stage.getHeight() / 3.2,
radius: radius,
fill: "blue",
stroke: "black",
strokeWidth: 4,
name: "circle",
draggable: true
});
shapes.add(circle1)
stage.add(shapes)
Store defaults in a separate variable, then use .setPosition( x, y ) to reset it:
//store settings
var settings = {
x: stage.getWidth() / 3.2,
y: stage.getHeight() / 3.2,
radius: radius,
fill: "blue",
stroke: "black",
strokeWidth: 4,
name: "circle",
draggable: true
};
//use settings
circle1 = new Kinetic.Circle(settings);
//after move, reset using:
circle1.setPosition(settings.x,settings.y);
you can also use the super handy setAttrs method like this:
circle1.setAttrs(settings);
Cheers!
I know this question is fairly old but I just solved something like this.
stage.removeChildren();
stage.setAttrs(stage.defaultNodeAttrs);
The stage.reset() doesn't work anymore, but this should do what you want.