Account Options

  1. Sign in
The old Google Groups will be going away soon, but your browser is incompatible with the new version.
Google Groups Home
« Groups Home
Paper.js
Home
+ new post
About this group
Join this group
Message from discussion Add Tillable Textures on object
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
dansalmo  
View profile  
 More options Jun 10 2012, 5:35 pm
From: dansalmo <salmo...@googlemail.com>
Date: Sun, 10 Jun 2012 14:35:46 -0700 (PDT)
Local: Sun, Jun 10 2012 5:35 pm
Subject: Re: Add Tillable Textures on object
Print | View thread | Show original | Report this message | Find messages by this author
I am very new to javascript and paperscript so someone else may
provide a much better solution.  Based on the docs, if you want to
repeat a lot of something but not access each one individually later,
the use of symbols is recommended since they perform much better.  I
also found the the size of the image does not get inherited by tile
unless the src is set before creating the raster.

var img = new Image();
// src must be set before raster for tile to have dimension of image
img.src = 'http://placehold.it/10x150/225522/225522';
var tile = new Raster(img);

// Create a symbol from the raster and remove tile from the view:
var symbol = new Symbol(tile);
tile.remove();

img.onload = function() {
    for (var i = 0; i < view.size.width / tile.width; i++) {
        for (var j = 0; j < view.size.height / tile.height; j++) {
            var instance = new PlacedSymbol(tile);
            instance.position = new Point(tile.width * i, tile.height
* j);
        };
    };
    view.draw();

};​

you can see it working here with a placeholder image:
http://jsfiddle.net/dansalmo/EjSFu/

On Jun 9, 9:19 pm, Emmanuel Bourmault <shadowbo...@gmail.com> wrote:

> What I need is like on this example the "Scaling" part.https://developer.mozilla.org/en/Canvas_tutorial/Using_images
> I will need to use the function drawImage but when I do this it fails.

> Here is the code that I tested:
>     var img = new Image();
>     var tile = new Raster(img);
>     img.src = '/img/grass.png';

>     img.onload = function(){
>      tile.drawImage(img,new Point(200, 200));
>     };

> On Saturday, June 9, 2012 11:03:35 PM UTC+8, Emmanuel Bourmault wrote:

> > Hello,
> > I like paper.js, I'm on it since 2weeks now, and I got stuck on something
> > that might seem easy but I just can't find out how to do it.
> > I got an image and want to put that image tillable to infinite.
> > It's just a small piece of grass that I want to set to a rectangle of an
> > undefined size, and want my piece of grass to fill all that space but 1
> > piece beside another.
> > I'm really blocked on that one, and I believe there is a solution for
> > that, otherwise paper.js is useless... Cause I can do that with normal
> > javascript without the use of paper.js
> > Other question, how can we use sprites ?

> > Thank you for your answers.


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2013 Google