I am having an issue with AlphaMaskFilter using createJS. I am using the example code from previous discussions on the forum and including both alphamaskfilter.js from github and easelJS from the CDN and am still getting undefined is not a function. Can someone offer a different look at this issue? I am choosing not to include preloader because of the high volume on the site.
lenses = new Image();
lenses.onload = function() {
var image = new createjs.Bitmap('images/reflection.png');
var maskImage = new createjs.Bitmap('images/1-1.png');
var amf = new createjs.AlphaMaskFilter(maskImage.image);
image.filters = [amf];
image.cache(0, 0, maskImage.image.width, maskImage.image.height);
glasses_container.addChild(image);
stage.update();
}
lenses.src = 'images/reflection.png'
Previous Discussion Examples
http://jsfiddle.net/Bpz88/193/
http://community.createjs.com/discussions/easeljs/584-alphamapfilter-using-alpha-png-image-to-mask-jpg
Filters currently are not included in the EaselJS package, so you have to include the filters on the page yourself, do you do that?
Related
ive ventured into the world of PIXI and JS, new programming language for me, liking the way it is right now but i have an issue.
I am a bit confused with the TextureCache and the loader. If you look at part of my code i try to add 3 different images to the screen. Ive been following the 'Get Started section' of the pixi website. I wanted to add their cat image, which i have, the tileset image (all of it)* and then a tile of the tileset image.
The issue is, i create 3 new sprite instances and the tileset image shows the area ive set for the tile(rocket) when i want it to show the whole tileset. Ive loaded in the tileset iin the cahce and the loader.
Why does tile show the cropped image and not the whole image?
Am i using the cache correctly to just store images?
Am i using the resources method properly to locate the image FROM the cache or the loader?
Is there any point of the cache?
my thoughts**
when you use the rectangle method, it destroys the original image and the cropped version is now tileset1 (the name of my image)?
<html>
<body>
<script src="pixi.js"></script>
<script>
//Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite,
Rectangle = PIXI.Rectangle,
TextureCache = PIXI.utils.TextureCache;
let app = new PIXI.Application({
width: 1000,
height: 600,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
TextureCache["tileset1.png","images/3.png"];
//load an image and run the `setup` function when it's done
loader.add(["images/3.png","tileset1.png"]).load(setup);
//This `setup` function will run when the image has loaded
function setup() {
let texture = TextureCache["tileset1.png"];
let rectangle = new Rectangle(96,64,32,32);
texture.frame = rectangle;
//Create the cat sprite, use a texture from the loader
let card = new Sprite(resources["images/3.png"].texture);
let tile = new Sprite(resources["tileset1.png"].texture);
let rocket = new Sprite(texture);
card.scale.set(0.06,0.06);
tile.x=400;
tile.y=400;
rocket.x=100;
rocket.y=100;
//Add the cat to the stage
app.stage.addChild(card);
app.stage.addChild(tile);
app.stage.addChild(rocket);
app.renderer.render(app.stage);
}
</script>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.js"></script>
Is there any point of the cache? - this question seems to be most important from your questions :)
Searching around about "pixi.js" and "TextureCache" gives following answers for example:
https://github.com/pixijs/pixi.js/issues/4053
MySecret commented on May 23, 2017:
the docs has no specs about PIXI.utils.TextureCache
...
englercj commented on May 26, 2017
This is intentional, it is not meant as a public-facing API. It is an internal cache used by some texture creation methods.
https://www.html5gamedevs.com/topic/17788-loader-and-texturecache-tutorial-anywhere/
xerver - Pixi.js Moderator:
Here is the loader: https://github.com/englercj/resource-loader
The code is really well documented, and there are examples on the readme. The pixi examples also use the loader a few times: http://pixijs.github.io/examples/
The TextureCache is an internal mechanism, there is rarely any reason you should even know it exists.
https://www.html5gamedevs.com/topic/25575-pixiloaderresources-or-texturecache/
xerver - Pixi.js Moderator:
Dont do this:
let e = PIXI.utils.TextureCache[player.img];
Instead use the resources the loader loaded for you:
let e = PIXI.loader.resources[player.img].texture;
...
TLDR: Usually TextureCache shouldnt be used directly :)
See also:
this explanation: https://www.html5gamedevs.com/topic/9255-pixijs-caching/?tab=comments#comment-55233
http://pixijs.download/release/docs/PIXI.BaseTexture.html#.addToCache
^ example of usage: https://jsfiddle.net/themoonrat/br35x20j/
So i have 3 different, which contains different 3d objects with special animations.
First is 3d objects rotating above the head and change the angle of orbit with our head shakes. The second one is falling 2d sprites all around character calling by eye closing. And the third one is simple facemesh with grid texture on it. Im draw special UI and code it, so in ArPlayer it works perfects, but when im try to upload it to facebook this UI not working and i have only mask number 1.
So im try to search the solution on Youtube and have only this, but this works only with texture changing i think. So my question is: Can i use instagram changing ui with my effects and if yes, how i can do this. Thaks a lot!
P.S: All images u can find.
Effects must not use custom buttons, keyboards, pickers or sliders - effects may use the native UI picker and slider only. (Spark AR Review Policies 2.6)
Using the Native UI picker, you can not only change textures, but also the visibility of objects.
Example:
Create a new project
Create several plane objects on the scene (for example 3 pieces) and name them obj0,
obj1, obj2 and make them invisible
In Capabilities add Native UI -> Picker
Add 3 textures to the project and name them icon_1, icon_2, icon_3 and check the "No compression" option for everyone
Add such a script
const NativeUI = require('NativeUI');
const Textures = require('Textures');
const Scene = require('Scene');
Promise.all([
Textures.findFirst('icon_1'),
Textures.findFirst('icon_2'),
Textures.findFirst('icon_3'),
Scene.root.findFirst('obj0'),
Scene.root.findFirst('obj1'),
Scene.root.findFirst('obj2')
]).then(onReady);
function onReady(assets) {
const texture0 = assets[0];
const texture1 = assets[1];
const texture2 = assets[2];
const objects = [assets[3],assets[4],assets[5]];
const picker = NativeUI.picker;
const index = 0;
const configuration = {
selectedIndex: index,
items: [
{image_texture: texture0},
{image_texture: texture1},
{image_texture: texture2}
]
};
picker.configure(configuration);
picker.visible = true;
picker.selectedIndex.monitor({fireOnInitialValue:true}).subscribe(function(index) {
objects[index.newValue].hidden = false;
if(index.oldValue != undefined)
{
objects[index.oldValue].hidden = true;
}
});
}
A similar official example is from developers, there they used Native UI picker (script) + patch to hide objects. Launch Spark AR Studio and create new project from template "3D Stickers" and watch how they did it. If you don’t have such a project template, update Spark AR Studio.
In a javascript script I need to superimpose two png images into one and then save the new image as a single file. My script does not work inside a webpage but completely batch.
The function that I imagined was something like this:
newPng = mergePng(png1, png2);
I have long searched for a javascript library that would allow me to get the result I wanted, but I did not find it. I've also tried among the previous questions here on Stackoverflow, but I have not found any solutions.
Does anyone know if the function I'm looking for exists?
Thank you.
You can draw png files inside a canvas like this:
drawing = new Image();
drawing2 = new Image();
drawing2.src = "draw2.png";
drawing.src = "draw.png";
drawing.onload = function() {
context.drawImage(drawing,0,0);
context.drawImage(drawing2,0,0);
};
I'm working on a really basic image editor (designed primarily to place text on an image), using PixiJS... though this may be more of a Canvas question, I'm not sure how to classify it as I'm green to Canvas and completely new to Pixi. Unfortunately I can't replicate the behavior in JSFiddle. As of now, I only have this running on localhost, but if anyone has suggestions on how to share this code, I'm open for any feedback.
The idea is that users would be able to select a image to edit (templates for various forms of signage), with the canvas rendering to the size of the image and adding said image as a child on loading the page. For now I'm using a 400 x 650px placeholder for testing purposes. The problem is that on an initial loading or hard refresh of the page, the canvas size defaults to Pixi's 800 x 600px. Soft refreshing the page will size the canvas to the image's dimensions, but I'd like to fix this issue... and I'm sure it's probably an easy fix, but I'm in uncharted waters here. Any help is appreciated. Thanks in advance.
I apologize if some of this code looks wonky, I'm fully aware this is a huge mess right now.
Javascript (this is actually in an AngularJS controller for the time being)
var img = new Image();
var signagetemplate = "placeholderSIGN.png";
img.src = signagetemplate;
var canwidth = img.width;
var canheight = img.height;
var renderer = PIXI.autoDetectRenderer(canwidth, canheight, {
transparent: true,
resolution: 1
});
document.getElementById('display').appendChild(renderer.view);
var stage = new PIXI.Container();
PIXI.loader
.add("signitem", signagetemplate)
.load(setup);
function setup() {
signitem = new PIXI.Sprite(
PIXI.loader.resources["signitem"].texture
);
stage.addChild(signitem);
renderer.render(stage);
}
Edit 9/21/17
I've tried using Pixi's built-in loader as suggested by Hachi in the comments to load the image, but it doesn't seem to load it at all. In the log, it's undefined. I don't understand this loader...
loader.add('signitem', signagetemplate);
loader.load((loader, resources) => {
console.log(resources.name, 'loaded.', 'progress:',resources.progressChunk, '%');
});
loader.load(setup);
I figured it out. All of the examples I found for working with the loader confused me a little bit, mainly just the syntax for entering basic JavaScript. Whether or not this is the cleanest way of going about the problem, I'm not sure, but this seems to work, at least locally. My feelings will not be hurt if someone comes along with a better solution.
var container = new PIXI.Container();
var signagetemplate = //Image to be loaded
var loader = PIXI.loader;
var canwidth;
var canheight;
var renderer = PIXI.autoDetectRenderer({
transparent: true,
resolution: 1
});
loader.add("signtemp", signagetemplate)
loader.on('complete', function(loader, resources, IMAGE) {
var signitem = new PIXI.Sprite(loader.resources.signtemp.texture);
canwidth = signitem.width;
canheight = signitem.height;
container.addChild(signitem);
})
loader.load(setup);
function setup() {
renderer.resize(canwidth, canheight);
renderer.render(container);
}
document.getElementById('display').appendChild(renderer.view);
I am trying to export chart.js chart to svg using canvas2svg.js.
It does not seems to be working, since chart.js refuses to use 'fake' canvas created by canvas2svg.js
My HTML code:
<div style="position: relative; height:20vh; width:100vh">
<canvas id="radarCanvas" ></canvas>
</div>
My script:
var ctx = document.getElementById("radarCanvas").getContext("2d");
var radarChart = new Chart(ctx, graphData); // Works fine
// Create canvas2svg 'fake' context
var c2s = C2S(500,500);
// new chart on 'fake' context fails:
var mySvg = new Chart(c2s, graphData);
// Result (console):
// "Failed to create chart: can't acquire context from the given item"
I've posted full example on Codepen (Sorry for long js there, I could not find a link from which to import canvas2svg so I pasted it at the beginnning of the script.)
If you use a recent Chart.JS version (2.7.1 at time of writing) you can get this running by tweaking canvas2svg a bit.
I added the following code to canvas2svg: Have a look at the Codepen
ctx.prototype.getContext = function (contextId) {
if (contextId=="2d" || contextId=="2D") {
return this;
}
return null;
}
ctx.prototype.style = function () {
return this.__canvas.style
}
ctx.prototype.getAttribute = function (name) {
return this[name];
}
ctx.prototype.addEventListener = function(type, listener, eventListenerOptions) {
console.log("canvas2svg.addEventListener() not implemented.")
}
BUT: It only works if you disable animation and responsiveness of the chart (set to false).
In case somebody stumbles across this question, replacing the ctx in sspechts answer to C2S and disabling animation and responsiveness of the graphdata one can get the svg from the canvas.
I forked the codepen project and added one function which tweaks the library with the codesnippets from sspecht and the two flags:
// deactivate responsiveness and animation
graphData.options.responsive = false;
graphData.options.animation = false;
https://codepen.io/anon/pen/RYVVPY
For devices that have a devicePixelRatio different than 1 or are zoomed in/out I did:
const getDevicePixelRatio = window.devicePixelRatio
window.devicePixelRatio = 1;
// C2S Code
window.devicePixelRatio = getDevicePixelRatio
Otherwise the svg may get cropped.
The most recent version of Chart.js (3.9.1) seems to use setTransform() and resetTransform() methods which are not implemented by Canvas2SVG ( no updates on github for ~5 years ).
This maintained version does implement theses methods : https://github.com/zenozeng/svgcanvas/ ( https://www.npmjs.com/package/svgcanvas ).
However, it seems to have issues for drawing line. I wrote a little workaround for that ( see https://github.com/zenozeng/svgcanvas/issues/25 ).
I hope it'll help.