I follow the Documentation that Konva have.
https://konvajs.github.io/docs/select_and_transform/Basic_demo.html
and
https://konvajs.github.io/docs/sandbox/Image_Resize.html
But the problem is they only have transform demo for rectangle shape. My plan is to have it on image. But so far I cant get it right. Here's my example code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/konvajs/konva/master/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Image Resize Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body class="col-md-12">
<div id="container" class="col-md-10">
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function testFunction() {
addCanvas();
}
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var image = group.get('Image')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.position(topLeft.position());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
image.width(width);
image.height(height);
}
}
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
// darth vader
var darthVaderImg = new Konva.Image({
width: 200,
height: 137,
name: 'imgs'
});
// yoda
var yodaImg = new Konva.Image({
width: 93,
height: 104,
name: 'imgs'
});
var darthVaderGroup = new Konva.Group({
x: 180,
y: 50,
draggable: true,
id: 'test1',
name: 'Imgs'
});
var num = 0;
function addCanvas() {
var test = new Konva.Group({
x: 200,
y: 100,
draggable: true
});
var testImg = new Konva.Image({
width: 93,
height: 104
});
layer.add(test);
test.add(testImg);
console.log('test');
var imageObjs = new Image();
imageObjs.onload = function() {
testImg.image(imageObjs);
layer.draw();
};
imageObjs.src = './pic/test2.png';
}
layer.add(darthVaderGroup);
darthVaderGroup.add(darthVaderImg);
var yodaGroup = new Konva.Group({
x: 20,
y: 110,
draggable: true,
id: 'Imgs',
});
layer.add(yodaGroup);
yodaGroup.add(yodaImg);
var imageObj1 = new Image();
imageObj1.onload = function() {
darthVaderImg.image(imageObj1);
layer.draw();
};
imageObj1.src = './pic/test2.png';
var imageObj2 = new Image();
imageObj2.onload = function() {
yodaImg.image(imageObj2);
layer.draw();
};
imageObj2.src = './pic/test1.jpg';
stage.on('click', function(e) {
if (e.target === stage) {
stage.find('Transformer').destroy();
layer.draw();
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('imgs')) {
return;
}
// remove old transformers
// TODO: we can skip it if current rect is already selected
stage.find('Transformer').destroy();
// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(e.target);
layer.draw();
});
function addTrans(e) {
}
</script>
</body>
</html>
The output
Here's the output. Whenever I click the image the transform will be out of place and will on stay in 1 place.
I finally figure it out. Turn out I place the draggable in the wrong place. I put the draggable into the Konva.Image instead in the group.
Thanks
I am not a real programmer but have done some small projects in JavaScript. I am now working on a small app backing up a scientific poster. The script works, but the cursor (cross) and the other field, both bit maps do not appear before the page is reloaded. Same behavior in several browsers. I found out that the onload function is not run. But the first one img is run. I don't understand why.
I did some googling and found references to the problem but did not really understand it.
Could somebody be so kind and help me?
I made a versjon with only the essential gode:
URL: http://folk.uio.no/gerald/IADMFR2017/test.html
Here is the source:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Increasing clinical relevance in oral radiology through computer-based examination?</title>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script>
function init() {
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
stage.enableMouseOver();
createjs.Touch.enable( stage );
img = new Image();
img.src = 'images/radiograph.png';
img.onload = function(event) {
var bitmap = new createjs.Bitmap('images/radiograph.png');
bitmap.x = 50;
bitmap.y = 80;
bitmap.on("click", handleMouseEvent);
stage.addChild(bitmap);
stage.update();
}
fieldIm = new Image();
fieldIm.src = 'images/field.png';
var field;
fieldIm.onload = function(event) {
field = new createjs.Bitmap('images/field.png');
field.scaleX=0.9;
field.scaleY=0.9;
field.x=400;
field.y=100;
field.visible = false;
stage.addChild(field);
stage.update();
}
crossIm = new Image();
crossIm.src = 'images/cross.png';
var cross;
crossIm.onload = function(event) {
cross = new createjs.Bitmap('images/cross.png');
cross.scaleX=0.5;
cross.scaleY=0.5;
cross.zIndex = 500;
cross.visible = false;
stage.addChild(cross);
stage.update();
}
stage.update();
function handleMouseEvent(evt) {
cross.x = evt.rawX - 12;
cross.y = evt.rawY - 12;
cross.visible = true;
stage.update();
}
var rect = new createjs.Rectangle(0, 0, 180, 30);
var frg = '#FFFFFF';
var bkg = '#000000';
var container = new createjs.Container();
container.x = 450;
container.y = 500;
var rectShape = new createjs.Shape();
rectShape.graphics.c().f(bkg).dr(0, 0, rect.width, rect.height);
var text = new createjs.Text("Check Result", "30px Arial", "#FFFFFF");
container.addChild(rectShape);
container.addChild(text);
container.on("click", handleToggle);
stage.addChild(container);
stage.update();
function handleToggle(evt) {
field.visible = !field.visible;
if (field.visible) {
text.text="Hide Result";
} else {
text.text="Check Result";
}
stage.update();
}
stage.update();
}
</script>
</head>
<body onload="init()">
<H1>Poster ICDMFR 2017 Clickable task example</H1>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>
I appreciate any help on that.
Greetings
Gerald
http://www.odont.uio.no/english/people/adm/fac/gerald
How can I make the imageObject to move in a circular path? Or more specific, what are the mathematical formulas needed to make it do so?
I am required to use setInterval with a function that caluclates the new coordinates of the picture. setInterval is supposed to call the function at least 20 times a second.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Graphics and animation using HTML5 Canvas</title>
<style>
#the-canvas { border: 1px dashed gray }
</style>
<script>
addEventListener('load', function() {
var x = document.getElementById("the-canvas");
var y = x.getContext("2d");
var imageObject = new Image();
imageObject.onload = function() {
y.drawImage(imageObject, 100, 200);
};
imageObject.src = "image.jpg";
});
</script>
</head>
<body>
<canvas id="the-canvas" width="500" height="400">
Your browser does not support the <canvas> element.
</canvas>
</body>
</html>
Mathematical formulas needed would be cosine in one dimension and sine in the other.
Something like this:
addEventListener('load', function() {
var x = document.getElementById("the-canvas");
var y = x.getContext("2d");
var imageObject = new Image();
var step = 0, radius = 50, speed = 0.05;
function spin() {
y.clearRect(0, 0, x.width, x.height);
y.drawImage(imageObject, 100 + radius * Math.cos(speed * step), 200 + radius * Math.sin(speed * step));
++step;
}
imageObject.onload = function() {
y.drawImage(imageObject, 100, 200);
setInterval(spin, 50); // 20 fps
};
imageObject.src = "image.jpg";
});
I'm trying to put multiple js animations on one html page. I've started my testing with just two animations. I figured once I learn how to implement two, I can easily implement ten.
I'm using Flash CC to publish html5 canvas animations (which outputs a simple html file and a js file). One animation is called "ship" and the other is called "car". As it stands, only "ship" is appearing on screen.
Below is my code. (Also there's a link for all the source files.) I'm no javascript/coding expert, but I am a troubleshooter/experimenter. I've repositioned code, tried renaming variables, etc. I'm pretty sure the big hangup is the createjs variable. I see that the createjs variable isn't called anywhere else on the page... so i'm guessing that it's being used in the remote js script(s)? I've commented out the var createjs = createjs_car because if it's not commented, no animation appears.
Anyhow, I'm looking for help to get two (or more) animations working on the same page. Thanks in advance!
Want the source files? Click here:
Click here
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations on One Page</title>
<script>
// change the default namespace for the CreateJS libraries:
var createjs_ship = createjs_ship||{};
var createjs = createjs_ship;
</script>
<!-- I've commented this out because if the commenting is removed, no animation shows up.
<script>
// change the default namespace for the CreateJS libraries:
var createjs_car = createjs_car||{};
var createjs = createjs_car;
</script>-->
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
var canvas, stage, exportRoot;
function init_ship() {
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs_ship.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs_ship.Ticker.setFPS(libs_ship.properties.fps);
createjs_ship.Ticker.addEventListener("tick", stage);
}
function init_car() {
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs_car.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs_car.Ticker.setFPS(libs_car.properties.fps);
createjs_car.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init_ship(); init_car();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
so I've got both playing together by:
replacing references to createjs_XXX with create_js in both car.js, ship.js and the init function
removing the associated variable instantiations
combining init functions
please see below and a codepen example here
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations on One Page</title>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
function init() {
var canvas, stage, exportRoot;
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_ship.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_car.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
JAVASCRIPT:
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 300,
height: 250,
fps: 24,
color: "#FFFFFF",
manifest: []
};
// symbols:
(lib.ship_1 = function() {
this.initialize();
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#0E586C").s().p("ArnDcQiHigAjkXIaeAAQh0Dbl1Dcg");
this.shape.setTransform(85.1,113);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#C0D0D7").s().p("AnFGVQDllvjlm6IMoAAQDHGnjHGCg");
this.shape_1.setTransform(101.6,40.5);
this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,170.3,135);
// stage content:
(lib.ship = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 2
this.instance = new lib.ship_1();
this.instance.setTransform(-4.9,107.5,1,1,0,0,0,85.2,67.5);
this.timeline.addTween(cjs.Tween.get(this.instance).to({x:390.1},128).wait(1));
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#9DC7D7").s().p("A3bIIIAAwPMAu2AAAIAAQPg");
this.shape.setTransform(150,52);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#438896").s().p("A3bLaIAA2yMAu2AAAIAAWyg");
this.shape_1.setTransform(150,177);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(129));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(59.9,125,390.2,250);
})(libs_ship = libs_ship||{}, images_ship = images_ship||{}, createjs = createjs||{}, ss = ss||{});
var libs_ship, images_ship, createjs, ss;
JAVASCRIPT:
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 300,
height: 250,
fps: 24,
color: "#FFFFFF",
manifest: []
};
// symbols:
(lib.ship = function() {
this.initialize();
// Layer 2
this.shape = new cjs.Shape();
this.shape.graphics.f("#000000").s().p("AGgBwQgvguAAhCQAAhBAvgvQAvguBDAAQBCAAAuAuQAwAvAABBQAABCgwAuQguAwhCgBQhDABgvgwgAqCBwQgugugBhCQABhBAugvQAvguBCAAQBDAAAvAuQAuAvABBBQgBBCguAuQgvAwhDgBQhCABgvgwg");
this.shape.setTransform(84.2,140);
// Layer 1
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#E58A2B").s().p("AtYDcQgwjHDUhZICqAAQBGiGAygRIJ+AAQBvAzA7B3IFoAxQBSBNASCPg");
this.shape_1.setTransform(86.5,113);
this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-0.1,91,173.3,65);
// stage content:
(lib.car = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 2
this.instance = new lib.ship();
this.instance.setTransform(-4.9,107.5,1,1,0,0,0,85.2,67.5);
this.timeline.addTween(cjs.Tween.get(this.instance).to({x:390.1},128).wait(1));
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#A57F57").s().p("A3bIIIAAwPMAu2AAAIAAQPg");
this.shape.setTransform(150,52);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#666666").s().p("A3bLaIAA2yMAu2AAAIAAWyg");
this.shape_1.setTransform(150,177);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(129));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(59.7,125,390.3,250);
})(libs_car = libs_car||{}, images_car = images_car||{}, createjs = createjs||{}, ss = ss||{});
var libs_car, images_car, createjs, ss;
I have some troubles using Three.js. I want to apply a texture on a sphere (an image). My code works without any problem... until I try it on a smartphone. I try to look for the bug with Firefox and its remote debugger, but I did not find the issue. Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0" />
<script src="./three.min.js"></script>
<script src="./sphere.js"></script>
<style>
html, body, #container {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container" style="width: 300px; height: 200px;"></div>
<script>
init();
</script>
</body>
</html>
and :
var renderer, scene, camera, mesh;
function init() {
var container = document.getElementById('container');
var width = container.offsetWidth;
var height = container.offsetHeight;
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, width/height, 1, 1000);
camera.position.set(0, 0, 300);
scene.add(camera);
var geometry = new THREE.SphereGeometry(200, 16, 16);
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader();
var f = function(img) {
texture.needsUpdate = true;
texture.image = img;
var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
render();
animate();
}
loader.load('sphere.jpg', f);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.y += 0.003;
render();
}
function render() {
renderer.render(scene, camera);
}
What do I do wrong?
If you want to see the code in action, you can go here. Note that the problem is here with both WebGLRenderer and CanvasRenderer.
As a repost: The problem is solved by using power of two texture sizes.