I've been messing around with Raphael.js recently and I've run into a problem regarding the position of each Raphael object.
I want to create an arbitrary amount of 'canvases' but have them arranged within a div, already positioned on the page. I've been trying to figure out a way to get them to behave something like a block element, but haven't come up with an answer. Each new raphael object is placed outside of any div.
Here's the html:
...
#content{height:100%; width:980px; margin:0 auto;}
</style>
</head>
<body>
<div id="content"></div>
...
and the javascript:
var previews = [];
var prevSize = 25;
var spacing = 10;
//get container
var container = document.getElementById('content');
//get container width
var containerWidth = parseInt(getComputedStyle(container,"").getPropertyValue('width'));
var prevsPerRow =containerWidth/(prevSize+spacing);
var rowsPerPage = 20;
for(var y=0; y<rowsPerPage-1; y++){
for(var x=0; x<prevsPerRow; x++){
var preview = Raphael((x*prevSize)+(x*spacing), (y*prevSize)+(y*spacing),prevSize, prevSize);
previews.push(preview);
}
}
for(var x=0; x<previews.length-1; x++){
var temp = previews[x];
var rectangle =temp.rect(0,0,prevSize,prevSize);
rectangle.attr('fill','black');
}
One solution I was considering was simply adding the offset of the desired div to the x and y coords of the object, but this doesn't seem like the best solution.
Thanks for the help!
edit: Here is a jsfiddle to help elucidate exactly what I'm getting at.
http://jsfiddle.net/xpNBr/
Well, this is two years too late but I'm not seeing an answer here. So for posterity and future seekers: I'd use the element or element Id factory methods supplied by raphael as described here.
From that page:
// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);
You could use a different container for every newly created canvas.
Here is a working example, using the addCanvas function to create every new element:
http://jsfiddle.net/creaweb/KtNPS/5/
Note that the spacing between canvas blocks is defined in CSS, as well as their size.
Related
I'm working in a Paper.js project where we're essentially doing image editing. There is one large Raster. I'm attempting to use the getSubRaster method to copy a section of the image (raster) that the user can then move around.
After the raster to edit is loaded, selectArea is called to register these listeners:
var selectArea = function() {
if(paper.project != null) {
var startDragPoint;
paper.project.layers[0].on('mousedown', function(event) { // TODO should be layer 0 in long run? // Capture start of drag selection
if(event.event.ctrlKey && event.event.altKey) {
startDragPoint = new paper.Point(event.point.x + imageWidth/2, (event.point.y + imageHeight/2));
//topLeftPointOfSelectionRectangleCanvasCoordinates = new paper.Point(event.point.x, event.point.y);
}
});
paper.project.layers[0].on('mouseup', function(event) { // TODO should be layer 0 in long run? // Capture end of drag selection
if(event.event.ctrlKey && event.event.altKey) {
var endDragPoint = new paper.Point(event.point.x + imageWidth/2, event.point.y + imageHeight/2);
// Don't know which corner user started dragging from, aggregate the data we have into the leftmost and topmost points for constructing a rectangle
var leftmostX;
if(startDragPoint.x < endDragPoint.x) {
leftmostX = startDragPoint.x;
} else {
leftmostX = endDragPoint.x;
}
var width = Math.abs(startDragPoint.x - endDragPoint.x);
var topmostY;
if(startDragPoint.y < endDragPoint.y) {
topmostY = startDragPoint.y;
} else {
topmostY = endDragPoint.y;
}
var height = Math.abs(startDragPoint.y - endDragPoint.y);
var boundingRectangle = new paper.Rectangle(leftmostX, topmostY, width, height);
console.log(boundingRectangle);
console.log(paper.view.center);
var selectedArea = raster.getSubRaster(boundingRectangle);
var selectedAreaAsDataUrl = selectedArea.toDataURL();
var subImage = new Image(width, height);
subImage.src = selectedAreaAsDataUrl;
subImage.onload = function(event) {
var subRaster = new paper.Raster(subImage);
// Make movable
subRaster.onMouseEnter = movableEvents.showSelected;
subRaster.onMouseDrag = movableEvents.dragItem;
subRaster.onMouseLeave = movableEvents.hideSelected;
};
}
});
}
};
The methods are triggered at the right time and the selection box seems to be the right size. It does indeed render a new raster for me that I can move around, but the contents of the raster are not what I selected. They are close to what I selected but not what I selected. Selecting different areas does not seem to yield different results. The content of the generated subraster always seems to be down and to the right of the actual selection.
Note that as I build the points for the bounding selection rectangle I do some translations. This is because of differences in coordinate systems. The coordinate system where I've drawn the rectangle selection has (0,0) in the center of the image and x increases rightward and y increases downward. But for getSubRaster, we are required to provide the pixel coordinates, per the documentation, which start at (0,0) at the top left of the image and increase going rightward and downward. Consequently, as I build the points, I translate the points to the raster/pixel coordinates by adding imageWidth/2 and imageHeight/2`.
So why does this code select the wrong area? Thanks in advance.
EDIT:
Unfortunately I can't share the image I'm working with because it is sensitive company data. But here is some metadata:
Image Width: 4250 pixels
Image Height: 5500 pixels
Canvas Width: 591 pixels
Canvas Height: 766 pixels
My canvas size varies by the size of the browser window, but those are the parameters I've been testing in. I don't think the canvas dimensions are particularly relevant because I'm doing everything in terms of image pixels. When I capture the event.point.x and event.point.y to the best of my knowledge these are image scaled coordinates, but from a different origin - the center rather than the top left. Unfortunately I can't find any documentation on this. Observe how the coordinates work in this sketch.
I've also been working on a sketch to illustrate the problem of this question. To use it, hold Ctrl + Alt and drag a box on the image. This should trigger some logging data and attempt to get a subraster, but I get an operation insecure error, which I think is because of security settings in the image request header. Using the base 64 string instead of the URL doesn't give the security error, but doesn't do anything. Using that string in the sketch produces a super long URL I can't paste here. But to get that you can download the image (or any image) and convert it here, and put that as the img.src.
The problem is that the mouse events all return points relative to 0, 0 of the canvas. And getSubRaster expects the coordinates to be relative to the 0, 0 of the raster item it is extracting from.
The adjustment needs to be eventpoint - raster.bounds.topLeft. It doesn't really have anything to do with the image width or height. You want to adjust the event points so they are relative to 0, 0 of the raster, and 0, 0 is raster.bounds.topLeft.
When you adjust the event points by 1/2 the image size that causes event points to be offset incorrectly. For the Mona Lisa example, the raster size (image size) is w: 320, h: 491; divided by two they are w: 160, h: 245.5. But bounds.topLeft of the image (when I ran my sketch) was x: 252.5, y: 155.5.
Here's a sketch that shows it working. I've added a little red square highlighting the selected area just to make it easier to compare when it's done. I also didn't include the toDataURL logic as that creates the security issues you mentioned.
Here you go: Sketch
Here's code I put into an HTML file; I noticed that the sketch I put together links to a previous version of the code that doesn't completely work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rasters</title>
<script src="./vendor/jquery-2.1.3.js"></script>
<script src="./vendor/paper-0.9.25.js"></script>
</head>
<body>
<main>
<h3>Raster Bug</h3>
<div>
<canvas id="canvas"></canvas>
</div>
<div id="position">
</div>
</main>
<script>
// initialization code
$(function() {
// setup paper
$("#canvas").attr({width: 600, height: 600});
var canvas = document.getElementById("canvas");
paper.setup(canvas);
// show a border to make range of canvas clear
var border = new paper.Path.Rectangle({
rectangle: {point: [0, 0], size: paper.view.size},
strokeColor: 'black',
strokeWidth: 2
});
var tool = new paper.Tool();
// setup mouse position tracking
tool.on('mousemove', function(e) {
$("#position").text("mouse: " + e.point);
});
// load the image from a dataURL to avoid CORS issues
var raster = new paper.Raster(dataURL);
raster.position = paper.view.center;
var lt = raster.bounds.topLeft;
var startDrag, endDrag;
console.log('rb', raster.bounds);
console.log('lt', lt);
// setup mouse handling
tool.on('mousedown', function(e) {
startDrag = new paper.Point(e.point);
console.log('sd', startDrag);
});
tool.on('mousedrag', function(e) {
var show = new paper.Path.Rectangle({
from: startDrag,
to: e.point,
strokeColor: 'red',
strokeWidth: 1
});
show.removeOn({
drag: true,
up: true
});
});
tool.on('mouseup', function(e) {
endDrag = new paper.Point(e.point);
console.log('ed', endDrag);
var bounds = new paper.Rectangle({
from: startDrag.subtract(lt),
to: endDrag.subtract(lt)
});
console.log('bounds', bounds);
var sub = raster.getSubRaster(bounds);
sub.bringToFront();
var subData = sub.toDataURL();
sub.remove();
var subRaster = new paper.Raster(subData);
subRaster.position = paper.view.center;
});
});
var dataURL = ; // insert data or real URL here
</script>
</body>
</html>
Hi here's my Raphael js to create some rectangles on a map svg
var rsr = Raphael('map', '600', '600');
var houses = [];
var houses_a = rsr.rect(433.6, 29.4, 100, 100);
houses_a.attr({x: '433.6',y: '29.4',fill: '#FFFFFF',stroke: '#000000',"stroke-width": '5',"stroke-miterlimit": '10','stroke-opacity': '1'}).data({'id': 'houses_a', 'house': 'House A'});
houses.push(houses_a);
i can change the color of the rectangle by
houses_a.node.setAttribute('fill', "red");
but when try to do
houses_a.node.setAttribute('fill', "apple.png");
or
houses_a.node.setAttribute('src', "apple.png");
it won't work.
Is there any other ways?
I'm not quite sure why you are using element.node.setAttribute rather than element.attr(); There are sometimes reasons, but not sure from the above.,
It depends what you are actually trying to do, it would help if there was a jsfiddle of what you want.
You could use this for example...to create a rect/image
var p = Raphael("paper", 800,800);
var img = p.image("http://svg.dabbles.info/tux.png", 10, 10, 300, 300)
.attr({ "clip-rect": "20,20,300,300" });
jsfiddle
I am using fabric js for generating templates, I want user to set height and width of a canvas for which I am using following code
canvas.setHeight(height);
canvas.setWidth(width);
However on doing this, the full width canvas stretches itself and the object disappears from the resized canvas as it was lets say 500 px wide before and user resized it to 100px then the items disappear.
I want to achieve a functionality so that if a user wants to change the size of canvas then instead of resizing the canvas I will show a rectangle and user can move rectangle accordingly to get the visible area and once user clicks on save then I will resize the canvas according to that rectangle, so that I can process the SVG later for further conversions but by doing so I am not sure how to get the visible area in that rectangle to the resized canvas, in short I want functionality like Darkroom js but for fabric js canvas object.
The current functionality is added to this JS fiddle http://jsfiddle.net/tbqrn/102/
Finally after doing some research I am able to do that, instead of resizing the canvas I am adding a rectangle object with "cropper" type as mentioned below
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'transparent',
width: 400,
height: 400,
strokeDashArray: [5, 5],
stroke: 'black',
type: 'cropper',
lockScalingX: true,
lockScalingY: true,
lockRotation: true
});
canvas.add(rect);
This rectangle will serve as the cropper, when a user submits the form then I am getting that cropper's dimensions as follow along with changing canvas size
var i;
var croppedLeft = 0;
var croppedTop = 0;
var canvasJson = canvas.getObjects();
// Cropping canvas according to cropper rectangle
if (canvas.getObjects().length > 0) {
var i;
for (i = 0; i < canvas.getObjects().length; i++) {
if (canvas.getObjects()[i].type == 'cropper') {
croppedLeft = canvas.getObjects()[i].left;
croppedTop = canvas.getObjects()[i].top;
canvas.setHeight(canvas.getObjects()[i].height);
canvas.setWidth(canvas.getObjects()[i].width);
canvas.getObjects()[i].remove();
}
}
}
And after that I am shifting all the other canvas objects accordingly as follow.
for (i = 0; i < canvasJson.length; i++) {
canvas.getObjects()[i].left = canvas.getObjects()[i].left - croppedLeft
canvas.getObjects()[i].top = canvas.getObjects()[i].top - croppedTop
canvas.renderAll();
}
And after doing that I am able to achieve the desired functionality, hope this helps someone.
Here is my fiddle http://jsfiddle.net/tbqrn/115/
I have an HTML5 canvas that is displaying a number of images and four description boxes. It is currently possible to drag and drop the images around the canvas, but I want to add functionality to remove an image when it is dragged to its correct description box.
I've tried writing the following function, but it does not currently seem to be doing anything... i.e. if I drag an image to its description box and drop it, it still remains on the canvas:
function initStage(images){
var stage = new Kinetic.Stage({
container: "container",
width: 1000,
height: 500
});
var descriptionLayer = new Kinetic.Layer();
//var imagesLayer = new Kinetic.Layer();
var allImages = [];
var currentScore = 0;
var descriptionBoxes = {
assetsDescriptionBox: {
x: 70,
y: 400
},
liabilitiesDescriptionBox: {
x: 300,
y: 400
},
incomeDescriptionBox: {
x: 530,
y: 400
},
expenditureDescriptionBox: {
x: 760,
y: 400
},
};
/*Code to detect whether image has been dragged to correct description box */
for (var key in sources){
/*Anonymous function to induce scope */
(function(){
var privateKey = key;
var imageSource = sources[key];
/*Check if image has been dragged to the correct box, and add it to that box's
array and remove from canvas if it has */
canvasImage.on("dragend", function(){
var descriptionBox = descriptionBoxes[privateKey];
if(!canvasImage.inRightPlace && isNearDescriptionBox(itemImage, descriptionBox)){
context.remove(canvasImage);
/*Will need to add a line in here to add the image to the box's array */
}
})
})();
}
}
The code I've written is based on the tutorial that I found at: http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/
Can anyone spot what I'm doing wrong, and how I can ensure that the image is removed from the canvas when it's dragged to its corresponding description box?
That example bugged me because it seemed old, so I edited it a little...
http://jsfiddle.net/LTq9C/1/
...keep in mind that I cant be positive that all my edits are the best way to do things, Im new and all ;)
And here I've edited it again for you to show the image being removed...
animal.on("dragend", function() {
var outline = outlines[privKey + "_black"];
if (!animal.inRightPlace && isNearOutline(animal, outline)) {
animal.remove();
animalLayer.draw();
}
});
http://jsfiddle.net/8S3Qq/1/
Please consider the following code snippet:
jQuery(function ()
{
drawLogo();
});
function drawLogo()
{
var paper = Raphael('logo', 100, 100);//creates canvas width=height=100px
var rect = paper.rect(1,1,98,98, 10);//chessboard background
rect.attr("fill","#efd5a4");
var circle1 = paper.circle(20,20,12);
var circle2 = paper.circle(50,20,12);
var circle3 = paper.circle(80,20,12);
var circle4 = paper.circle(20,50,12);
var circle5 = paper.circle(50,50,12);
var circle6 = paper.circle(80,50,12);
var circle7 = paper.circle(20,80,12);
var circle8 = paper.circle(50,80,12);
var circle9 = paper.circle(80,80,12);
paper.path("M35,0 L35,100");
paper.path("M65,0 L65,100");
paper.path("M0,35 L100,35");
paper.path("M0,65 L100,65");
circle1.animate({scale:"0"}, 2000);
//setTimeout(circle1.animate({scale:"1"}, 2000), 2000);
}
The animation I'd like to achieve is a chain of two parts, first, a vertical scale animation from 100% to 0%, second, a vertical scale animation from 0% to 100%. The above code scales down both vertically and horizontally, so it is incorrect.
I've check Raphael's documentation but couldn't get it, particularly because I cannot see the correct syntax... Any good API reference like that of jQuery's?
Also, if I make the following change, then Firefox shows an error saying too many recursions:
transform(circle1);
function transform(item)
{
item.animate({scale:"0"}, 2000, transform(item));
}
I know this is bad, but what is the correct way to get a infinite "loop" of animation?
Edit: I modified the code to the following
transform([circle1, circle3, circle5, circle7, circle9]);
function transform(elements)
{
for(var e in elements)
{
e.animate({scale:"0"}, 2000);
}
}
in the hope that this would at least run the first part of animation for 5 circles, but unfortunately, it only gives an error saying e.animate() is not a function. Probably the reason is that when elements are retrieved back from the array, it "loses its type"? (just like in Java when you get an elements from plain old ArrayList, you must explicitly downcast or everything will be just of type object.)
2nd Edit before going to bed
At least the following works for once!
var elements = [circle1, circle3, circle5, circle7, circle9];
for(var i = 0; i < elements.length; i++)
transform(elements[i]);
function transform(e)
{
e.animate({scale: 0},2000, function(){this.animate({scale:1},
2000, transform(this));});
}
Achieved parts: chained two scaling animations one after another, for five circles;
Failed parts: Still not an infinite loop, still not only vertical scale.
It seems scaling of circle in just one direction is not possible. Instead use an ellipse. The scale attribute takes a string like "1 0" which means scale 100% for x (horizontally) and 0% for y (vertically). See attr-scale
So your animation can be achieved by
ellipse.animate({"50%": {scale: "1 0"}, "100%": {scale: "1 1"}}, 2000);
see 3rd method (keyframes) in animate
which means at 50% of animation the ellipse should be scaled 0% vertically and at 100% animation scale it back to 100%.
When you call a function, it will be evaluated immediately. Your transform calls transform(item) again before passing it to animate. Instead you should wrap it in a function and pass it.
Here's the full source
jQuery(function ()
{
drawLogo();
});
function drawLogo()
{
var paper = Raphael('logo', 100, 100);//creates canvas width=height=100px
var rect = paper.rect(1,1,98,98, 10);//chessboard background
rect.attr("fill","#efd5a4");
var ellipse1 = paper.ellipse(20,20,12, 12);
var ellipse2 = paper.ellipse(50,20,12, 12);
var ellipse3 = paper.ellipse(80,20,12, 12);
var ellipse4 = paper.ellipse(20,50,12, 12);
var ellipse5 = paper.ellipse(50,50,12, 12);
var ellipse6 = paper.ellipse(80,50,12, 12);
var ellipse7 = paper.ellipse(20,80,12, 12);
var ellipse8 = paper.ellipse(50,80,12, 12);
var ellipse9 = paper.ellipse(80,80,12, 12);
paper.path("M35,0 L35,100");
paper.path("M65,0 L65,100");
paper.path("M0,35 L100,35");
paper.path("M0,65 L100,65");
var elements = [ellipse1, ellipse3, ellipse5, ellipse7, ellipse9];
for(var i = 0; i < elements.length; i++)
transform(elements[i]);
}
function transform(e)
{
e.animate({
"50%": {scale: "1 0"},
"100%": {scale: "1 1", callback: function() {transform(e);}}
}, 2000);
}