I have a WebView with local HTML and JavaScript made by animate CC, but it's impossible to zoom in my pages.
I activated "Scale Page to Fit", but nothing works.
Do I have to do something special in Animate CC, or modify my HTML or JavaScript?
Maybe in my webview.m?
Here's my .html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>accueil</title>
<!-- write your code here -->
<style>
#canvas {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="accueil.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
handleComplete();
}
function handleComplete() {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
exportRoot = new lib.accueil();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Code to support hidpi screens and responsive scaling.
(function(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = w*sRatio+'px';
canvas.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
})(true,'both',true,1);
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<canvas id="canvas" width="657" height="1202" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
</body>
</html>
Guys Here is a function which should display a red ball on the frame, but it isn't doing so, I am watching a tutorial to do that, I am doing everything exactly as he does but I can't figure out what is the problem here.. Please I need to know this. If somebody can understand please help..
var canvas,ctx,w,h,game=true;
var ball;
var BALL = function(x,y){
this.x = x;
this.y = y;
this.color = "red";
this.radius = 10;
this.vx = 3;
this.vy = -4;
}
window.onload = init;
function init() {
canvas = document.getElementById("canvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext('2d');
ball = new BALL(w/2,h/2+50);
beginGame();
}
function beginGame(){
if(game){
ctx.clearRect(0,0,w,h);
ball.x+=ball.vx;
ball.y+=ball.vy;
if((ball.x+ball.radius)+ball.vx>w || (ball.x-ball.radius)+ball.vx<0){
ball.vx = -ball.vx;
}
ctx.fillStyle = ball.color;
ctx.beginPath();
ctx.arc(ball.x,ball.y,ball.radus,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
window.requestAnimationFrame(beginGame);
}else{
//Game Over
}
}// End of beginGame function
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>არკანოიდი</title>
<script src='tools.js'></script>
<script src='jquery-1.11.2.min.js' language='javascript' > </script>
<style>
canvas {
border: 1px solid silver;
}
</style>
</head>
<canvas id="canvas" width="800" height="600"></canvas>
<body>
</body>
</html>
I don' know if it will fix everything but your canvas is outside of your body tags.
for script tags:
1. don't use language='javascript'. this is not needed.
2. If you do want to explicitly declare it as javascript, then use type="text/javascript". This is automatically the case, so you don't even need to do that.
3. Put the canvas inside the body tags.
4. use window.addEventListener("load", init) instead of window.onload(init)
5.inside startgame function:
function beginGame()
{
// previous lines omitted...
ball = new BALL(x, y);
// other lines here...
}
Here's my html document:
<html>
<head>
<meta charset="utf-8">
<title>Automapper Editor</title>
</head>
<body>
<nobr>
<script>
var img = new Image()
img.src = "grass_main_0.7.png"
for(var y=0; y < 16; y++) {
for(var x=0; x < 16; x++) {
var tilecanvas = document.createElement("canvas")
var tilectx = tilecanvas.getContext("2d")
tilecanvas.width = 64
tilecanvas.height = 64
tilecanvas.draggable = true
tilectx.drawImage(img, x*64, y*64, 64, 64, 0, 0, 64, 64)
document.body.appendChild(tilecanvas)
}
document.body.appendChild(document.createElement("br"))
}
</script>
</nobr>
</body>
</html>
I want to split an image with the size of 1024 pixel in 16 images with the size of 64 pixel. Then i want to draw them on canvas and write them to the document. This are my problems:
The line tilecanvas.draggable = true doesn't work, this should do the same as <canvas draggable="true">.
The <nobr> tag doesn't prevent the canvas from wrapping, but i want them to stay 16x16 on the screen.
The first time you load the page you can't see the image, you can simulate this by pressing STRG+F5 (a.k.a. Ctrl-F5) in firefox.
You can solve it by:
Using a container div for the tiles
Set fixed width for container element
Adjust the CSS for canvas element to float
Live example
(note: added random alpha for the tiles/demo to increase visibility)
var img = new Image();
img.onload = render;
img.src = "http://www.psdgraphics.com/file/colorful-triangles-background.jpg";
function render() {
var cont = document.getElementById("cont");
for (var y = 0; y < 16; y++) {
for (var x = 0; x < 16; x++) {
var tilecanvas = document.createElement("canvas");
var tilectx = tilecanvas.getContext("2d");
tilecanvas.width = 64;
tilecanvas.height = 64;
tilecanvas.draggable = true;
tilectx.globalAlpha = Math.random() + 0.5; // just to increase visuals
tilectx.drawImage(img, x * 64, y * 64, 64, 64, 0, 0, 64, 64);
cont.appendChild(tilecanvas);
}
}
}
#cont {width: 1024px;border: 1px solid #000}
canvas {float:left}
<div id="cont"></div>
As said by RienNeVaPlu͢s & Ken Fyrstenberg, make sure you give your image time to load with onload.
Here's a proof-of-concept allowing html drag-drop of a spliced image-canvases:
https://jsfiddle.net/m1erickson/g9nfuved/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red; margin-left:0px;}
#dropzone{width:250px;height:50px;border:1px solid blue;}
</style>
<script>
$(function(){
var $results=$('#results');
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
function start(){
var w=img.width/4;
var h=img.height;
for(var x=0; x < 4; x++) {
var tilecanvas = document.createElement("canvas");
var tilectx = tilecanvas.getContext("2d");
tilecanvas.width = w;
tilecanvas.height = h;
tilecanvas.draggable = true
tilecanvas.id='canvas'+x;
tilectx.drawImage(img, x*w,0,w,h, 0, 0, w, h)
document.body.appendChild(tilecanvas)
tilecanvas.addEventListener('dragstart', function(e){
e.dataTransfer.setData('text',e.target.id);
}, false);
tilecanvas.addEventListener('dragenter', handleEvents, false);
tilecanvas.addEventListener('dragover', handleEvents, false);
tilecanvas.addEventListener('dragleave', handleEvents, false);
tilecanvas.addEventListener('dragend', handleEvents, false);
}
document.body.appendChild(document.createElement("br"))
var dropzone=document.getElementById('dropzone');
dropzone.addEventListener('dragover',function(e){e.preventDefault(); return(false);});
dropzone.addEventListener('dragenter',function(e){return(false);});
dropzone.addEventListener('drop',function(e){
$results.text('You dropped: '+e.dataTransfer.getData('text'));
return(false);
});
}
function handleEvents(e){ return(false); }
}); // end $(function(){});
</script>
</head>
<body>
<h4 id='results'>Drag 1+ of the image strips</h4>
<div id='dropzone' droppable='true'>Drop Here.</div>
</body>
</html>
I'm attempting to parse a tileset image (of type .png) into an array. I've got a test canvas that I'm using to draw it to first, then I am extracting the image info from it. When I run this code, it throws "Uncaught TypeError: Type error." I was able to log that this.mainTiles is empty. Any ideas? I don't know all the subtleties of Canvas yet, so I'm stuck. Thanks for the help! (Also, you can ignore the last line at the end, I was just using it to test--but I wanted to illustrate that it doesn't work).
function TileSet() {
this.tileSheets = [];
this.mainTiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var tileSheet = new Image();
try {
tileSheet.src = spriteSheetLoc;
}
catch(err) {
dMode.Log("Invalid TileSheet Src ( TileSet.setSpriteSheet() Failed ); ERR: " + err);
}
tempContext.drawImage(tileSheet, 0, 0);
var tilesX = tempContext.width / this.tileWidth;
var tilesY = tempContext.height / this.tileHeight;
for(var i=0; i<tilesY; i++) {
for(var j=0; j<tilesX; j++) {
// Store the image data of each tile in the array.
this.mainTiles.push(tempContext.getImageData(j*this.tileWidth, i*this.tileHeight, this.tileWidth, this.tileHeight));
}
}
context.putImageData(this.mainTiles[0], 5, 5);
}
Edit: Here are how the canvases and such are defined:
var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
var Tiles = new TileSet;
//this is the line it gets stuck at
Tiles.addSpriteSheet("resources/tiles/tilea2.png");
Edit 2: After markE's answer, here's the latest update. Still feel as though I'm missing a fundamental property regarding .onload.
function TileSet() {
this.Tiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.tileCount = 4;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var tileSheet = new Image();
tileSheet.onload = function() {
tempCanvas.width = tileSheet.width;
tempCanvas.height = tileSheet.height;
tempContext.drawImage(tileSheet, 0, 0);
for (var t=0;t<this.tileCount;t++) {
this.Tiles[t]=tempContext.getImageData(t*this.tileWidth,t*32,this.tileWidth,tileSheet.height);
dMode.Log(this.Tiles);
}
context.putImageData(this.Tiles[this.Tiles.length-1],0,0);
dMode.Log(this.Tiles);
}
tileSheet.src = spriteSheetLoc;
}
Here's how to parse a spritesheet into an array of separate canvas imageData
I have some working code that does what you want to do.
I didn't have your "resources/tiles/tilea2.png" so I used my own "monstersArun.png" which is a 10 across spritesheet of 64x64 tiles.
You can modify this code to fit your spritesheet layout ( rows x columns and tile size).
Here is the code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var tileCount=10;
var tiles=new Array();
var tileWidth;
var t;
var img=new Image();
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
tileWidth=img.width/tileCount;
ctx.drawImage(img,0,0);
for(var t=0;t<tileCount;t++){
tiles[t]=ctx.getImageData(t*tileWidth,0,tileWidth,img.height);
}
// just a test
// draw the last tiles[] into another canvas
var canvasTile=document.getElementById("canvasTile");
var ctxTile=canvasTile.getContext("2d");
canvasTile.width=tileWidth;
canvasTile.height=canvas.height;
ctxTile.putImageData(tiles[tiles.length-1],0,0);
}
img.src="monsterarun.png";
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br/>
<canvas id="canvasTile" width=64 height=64></canvas>
</body>
</html>
[Edit--to include Juan Mendes good idea give help on coding problem]
Also, as I look at your code...here:
tileSheet.src = spriteSheetLoc;
This causes your image to load. That loading takes time to do, so javascript starts loading the image, but it also immediately goes on to your next line of code. As a result, your code below tries to use the image before it's available--no good!
So you should give javascript a chance to fully load your image before processing the rest of your code. You do this using the onload method of Image like this:
var tileSheet = new Image();
tileSheet.onload=function(){
// put ALL you code that depends on the image being fully loaded here
}
tileSheet.src = spriteSheetLoc;
Notice how you put tileSheet.src after the onload function. In reality, javascript executes tilesheet.src and then goes back to execute all the code in the onload block!
[Edit again -- complete code]
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
// create a new TileSet
var Tiles = new TileSet();
// parse a spritesheet into tiles
//Tiles.addSpriteSheet("resources/tiles/tilea2.png","anyName");
Tiles.addSpriteSheet("houseIcon.png","anyName");
function TileSet() {
this.Tiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.tileCount = 4;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var me=this; // me==this==TileSet
var tileSheet = new Image();
tileSheet.onload = function() {
// calculate the rows/cols in the spritesheet
// tilesX=rows, tilesY=cols
var tilesX = tileSheet.width / me.tileWidth;
var tilesY = tileSheet.height / me.tileHeight;
// set the spritesheet canvas to spritesheet.png size
// then draw spritesheet.png into the canvas
tempCanvas.width = tileSheet.width;
tempCanvas.height = tileSheet.height;
tempContext.drawImage(tileSheet, 0, 0);
for(var i=0; i<tilesY; i++) {
for(var j=0; j<tilesX; j++) {
// Store the image data of each tile in the array.
me.Tiles.push(tempContext.getImageData(j*me.tileWidth, i*me.tileHeight, me.tileWidth, me.tileHeight));
}
}
// this is just a test
// display the last tile in a canvas
context.putImageData(me.Tiles[me.Tiles.length-1],0,0);
}
// load the spritesheet .png into tileSheet Image()
tileSheet.src = spriteSheetLoc;
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="tempCanvas" width=300 height=300></canvas><br/>
<canvas id="gameCanvas" width=300 height=300></canvas>
</body>
</html>
Try replacing tempContext.width and tempContext.height with tempCanvas.width and tempCanvas.height, respectively. I don't believe contexts have width/height.
Hey, I'm trying to add a mousemove and click event to an SVG Raphael Rectangle:
Fiddle: http://jsfiddle.net/neuroflux/nXKbW/1/
Code:
tile = ctx.rect(x*10,y*(i*10),10,10).attr({
fill:'#000000',
stroke: '#ffffff'
});
tile.mouseover(function(e) {
pX = e.pageX;
pY = e.pageY;
});
tile.click(function() {
console.log('x: '+pX+'| y:'+pY);
});
Obviously, for some reason this doesn't function - I get no output onClick :'(
Ok I've got the click function to work. Finally ^_^.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
/* GLOBAL VARIABLES */
var drawFrames;
var canvas;
var ctx;
var universe = new Array();
var tile;
var pX,pY = 0;
universe = (
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]
);
/* WINDOW LOAD */
window.onload = function() {
init();
}
/* INITIALISATION */
function init() {
ctx = Raphael(10, 50, 320, 200);
drawFrames = setInterval(drawFrame, 40);
}
/* FRAME RENDER LOOP */
function drawFrame() {
//ctx.clear();
for (var x = 0; x < universe.length; x++) {
for (var y = 0; y < universe[x].length; y++) {
for (var i= 0; i < 11; i++) {
tile = ctx.rect(x*10,y*(i*10),10,10).attr({
fill:'#000000',
stroke: '#ffffff'
}).click(function(e) {
console.log('x: '+e.pageX+'| y:'+e.pageY);
})
}
}
}
}
</script>
</head>
<body>
<canvas id="main" width="800" height="600">
<h1>No Support I'm Afraid...</h1>
</canvas>
</body>
</html>
first give your raphael object an id then bind the click event to it.
tile = ctx.rect(x*10,y*(i*10),10,10).attr({
fill:'#000000',
stroke: '#ffffff'
});
tile.node.id='tile_id';
$('#tile_id').bind('click',function(){alert('clicked');});