Copy link to clipboard
Copied
I need to be able to access the actual image from the library so I can do this:
function drawShape() {
console.log('draw shape');
overlay = new createjs.Shape();
stage.addChild(overlay);
overlay.graphics.clear()
.beginBitmapFill(img)
.drawRect(0,0,800,600);
overlay.cache(0, 0, self.canvas.width, self.canvas.height);
}
var img = new Image();
img.onload = drawShape;
img.src = "test.png";
Do anyone know how to grab the image from either the library directly or from an MC holding the image?
Just to be clear I need to the actual image file so I can manipulate it directly. Simply loading an MC containing the image or loading the image via linkage will not work. Not unless I can use either of those to grab the image.
I think this may do what you want:
In the library, give the bitmap a linkage name (double-click in the Linkage column next to the bitmap's name).
var myImage= new Image();
myImage.onload = drawShape;
myImage.src = img.myTestLinkageName.src;
DO NOT create any variables named "img". That name is used by CreateJS to hold the collection of all loaded bitmaps.
Copy link to clipboard
Copied
I think this may do what you want:
In the library, give the bitmap a linkage name (double-click in the Linkage column next to the bitmap's name).
var myImage= new Image();
myImage.onload = drawShape;
myImage.src = img.myTestLinkageName.src;
DO NOT create any variables named "img". That name is used by CreateJS to hold the collection of all loaded bitmaps.
Copy link to clipboard
Copied
Good point about my naming. Thanks.
img.myTestLinkageName.src returns Cannot read property 'src' of undefined
and I think Im calling everything correctly:
Copy link to clipboard
Copied
I just tested using the exact code you posted, and it worked fine. Are you sure you haven't overwritten img anywhere else in your code? Try doing a console.log(img);
Copy link to clipboard
Copied
I dont see any other img variables I have created and the console output looks like an atlas object:
---- edit ----
I see the issue, Im using spriteSheets. As soon as I disable spriteSheets, everything seems ok. But how to do this with spriteSheets?
Copy link to clipboard
Copied
Ugh, spritesheets. I never use them because of all the problems they cause, but maybe this would work. Try:
var myImage = new lib.spot_0_0;
Then pass myImage directly to beginBitmapFill.
Copy link to clipboard
Copied
Tried that before. It seems spriteSheets really complicate the issue.
Copy link to clipboard
Copied
This may be overkill, but it works whether or not spritesheets are enabled. Copies the image to a secondary canvas, then uses that canvas as the fill pattern.
var imgLib = new lib.spot_0_0;
var imgBounds = imgLib.getBounds();
imgLib.cache(imgBounds.x, imgBounds.y, imgBounds.width, imgBounds.height);
var myImage = imgLib.cacheCanvas;
drawShape();
Copy link to clipboard
Copied
I'll give it a try tomorrow. Thanks for the help on this