I am new with HTML5.
I have to implement such a functionality that I want images to be dropped within a canvas from outside, then there are visible boundaries within canvas and the images can be moved from one boundary to another. It is the same as in the following link,
http://custom.case-mate.com/diy?bypassLandingPage=true
As, in the site, user selects the pattern and drags images into that. Then he can drag the images between the boundaries. please give some solution for implementing such a functionality.
Here is what I have tried,
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {position:relative;
left:150%;
border: 10px solid #9C9898;
background-color: grey;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 400,
});
var layer = new Kinetic.Layer();
var redLine = new Kinetic.Line({
points: [150, 0, 150, 400],
stroke: "white",
strokeWidth: 2,
});
var blueLine = new Kinetic.Line({
points: [150, 0, 150, 120, 300, 120],
stroke: "white",
strokeWidth: 2,
});
var thirdLine = new Kinetic.Line({
points: [300, 120, 150, 120, 150, 400],
stroke: "white",
strokeWidth: 2,
});
var imageObj = new Image();
imageObj.onload = function() {
var image = new Kinetic.Image({
x: stage.getWidth() / 2 - 50,
y: stage.getHeight() / 2 - 60,
image: imageObj,
width: 100,
height: 120,
});
image.draggable(true);
layer.add(image);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = "images/212.png";
layer.add(redLine);
layer.add(blueLine);
layer.add(thirdLine);
stage.add(layer);
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Here's a nice tutorial on HTML5 native drag'n'drop:
http://www.html5rocks.com/en/tutorials/dnd/basics/
Basically you can declare an item as draggable in HTML5 with the draggable attribute
<div class="draggable" draggable="true">A</div>
<div class="draggable" draggable="true">B</div>
...and then use Javascript to handle some events like:
var items = document.querySelectorAll('.draggable');
[].forEach.call(items, function(item) {
item.addEventListener('dragstart', function(){ /*handle drag start*/ }, false);
item.addEventListener('dragenter', function(){ /*handle drag enter*/ }, false)
item.addEventListener('dragover', function(){ /*handle drag over*/ }, false);
item.addEventListener('dragleave', function(){ /*handle drag leave*/ }, false);
item.addEventListener('drop', function(){ /*handle drop*/ }, false);
item.addEventListener('dragend', function(){ /*handle drag end*/ }, false);
});
Related
I am having trouble flipping or mirroring the object horizontally when the object itself is clicked on the FabricJS canvas.
I came close but it was mirroring the object when it was being resized too, which I didn't want.
I would guess I need to add the 'flipX: true' attribute to object on the first click and on the next click remove that attribute and so on with each click. Or maybe that is over complicating it and it can be done much easier with a flipX function I do not know.
I did find a Fiddle that flipped the object, but it was onclick of a button not the object itself.
I am struggling to solve this :\
My Fiddle
HTML:
<canvas id="canvas" width="400" height="300"></canvas>
JS:
var canvas = this.__canvas = new fabric.Canvas('canvas');
canvas.on('object:selected', function() {
toggle('flipX');
});
// create a rectangle
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 100,
height: 50,
angle: 20,
fill: 'red'
});
canvas.add(rect);
canvas.renderAll();
You could accomplish that in the following way ...
var canvas = this.__canvas = new fabric.Canvas('canvas');
// mouse event
canvas.on('mouse:down', function(e) {
if (e.target) {
if (!e.target.__corner) {
e.target.toggle('flipX');
canvas.renderAll();
}
e.target.__corner = null;
}
});
// create a rectangle
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 100,
height: 50,
angle: 20,
});
// set gradient (for demonstration)
rect.setGradient('fill', {
type: 'linear',
x1: -rect.width / 2,
y1: 0,
x2: rect.width / 2,
y2: 0,
colorStops: {
0: '#ffe47b',
1: 'rgb(111,154,211)'
}
});
canvas.add(rect);
rect.set('flipX', true);
canvas.renderAll();
body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #ccc}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width="208" height="208"></canvas>
Same from above, different case.
Apply flip to background image
fabric.Image.fromURL('../' +ImageUrl, function (img02) {
Backcanvas.setBackgroundImage(img02, Backcanvas.renderAll.bind(Backcanvas), {
backgroundImageStretch: false,
top: 0,
left: 0,
originX: 'left',
originY: 'top',
flipY:'true'
});
Backcanvas.renderAll();
Backcanvas.backgroundImage.setCoords();
canvas.renderAll();
Backcanvas.renderAll();
}, { crossOrigin: 'anonymous' });
I've got the following code:
var text = new Kinetic.Text({
text: carNames,
fontFamily: 'Calibri',
fontSize: 17,
fill: 'black',
align: 'center'
});
text.toImage({
width: text.getWidth(),
height: text.getHeight(),
callback: function (img) {
var cachedText = new Kinetic.Image({
image: img,
x: 180,
y: 0
});
wedge.add(cachedText);
layer.draw();
}
});
Which produces wedges and text that look like this:
But I need the text to be centered inside the wedge, like this:
Does anyone know of a way to achieve this? I've tried several things but I just can't get the text to align as in the second image.
Thanks in advance for your trouble.
One way to do it is using the text's offset in combination with the text's rotationDeg:
Demo: http://jsfiddle.net/m1erickson/mqsY3/
Here's code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var cx=175;
var cy=175;
var wedgeRadius=120;
var accumAngle=0;
var center = new Kinetic.Circle({
x:cx,
y:cy,
radius:5,
fill: 'red'
});
layer.add(center);
for(var i=0;i<12;i++){
newTextWedge(30,"Element # "+i);
}
function newTextWedge(angle,text){
var wedge = new Kinetic.Wedge({
x: cx,
y: cy,
radius: wedgeRadius,
angleDeg: angle,
stroke: 'gray',
strokeWidth: 1,
rotationDeg:-accumAngle+angle/2
});
layer.add(wedge);
if(accumAngle>90 && accumAngle<270){
var offset=[wedgeRadius-10,7];
var textAngle=accumAngle-180;
}else{
var offset=[-50,7];
var textAngle=accumAngle;
}
var text = new Kinetic.Text({
x:cx,
y:cy,
text:text,
fill: 'red',
offset:offset,
rotationDeg:textAngle
});
layer.add(text);
layer.draw();
accumAngle+=angle;
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I feel I am being incredible stupid but for some reason am blind to being able to fix this issue.
I want 3 individual layers, each that can have multiple object/shapes on them and then on click I want the visible layer to be removed or hid and the next layer to appear.
I think my issue is dying in the logic and calling the function. Here is the function and the jsfiddle:
var version = 0;
function layerVersion() {
if (version === 1) {
stage.add(layerBlue);
layerBlue.on('click', function() {
layerOrange.hide;
version = 2;
});
} else if (version === 2) {
stage.add(layerOrange);
} else {
stage.add(layerPink);
layerpink.on('click', function() {
layerPink.hide;
version = 1;
});
}
}
Here is the jsFiddle link: http://jsfiddle.net/TJ96r/2/
Any help would be much appreciate I feel so dumb for not being able to figure it out.
Check this out.
http://jsfiddle.net/TJ96r/3/
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layerPink = new Kinetic.Layer();
layerPink.hide();
var layerBlue = new Kinetic.Layer();
var layerOrange = new Kinetic.Layer();
layerOrange.hide();
// pink box
var pink = new Kinetic.Rect({
x: 50,
y: 50,
width: 100,
height: 100,
fill: 'pink',
stroke: 'black',
strokeWidth: 2
});
// blue box
var blue = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 100,
fill: 'blue',
stroke: 'black',
strokeWidth: 2
});
// orange box
var orange = new Kinetic.Rect({
x: 150,
y: 150,
width: 100,
height: 100,
fill: 'orange',
stroke: 'black',
strokeWidth: 2
});
layerPink.add(pink);
layerBlue.add(blue);
layerOrange.add(orange);
var version = 0;
stage.add(layerBlue);
stage.add(layerOrange);
stage.add(layerPink);
layerBlue.on('click', function() {
layerBlue.hide();
layerOrange.show();
layerPink.hide();
stage.draw();
});
layerOrange.on('click', function() {
layerBlue.hide();
layerOrange.hide();
layerPink.show();
stage.draw();
});
layerPink.on('click', function() {
layerPink.hide();
layerOrange.hide();
layerBlue.show();
stage.draw();
});
I am trying to design an editor which can be used to draw shapes using blocks, using kineticjs framework. So far everything was good. I am able to add rectangle, to change its size, and to rotate it. But what i said only works on the last created object. I can t select one of them to modify. Here html of the code:
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<table width="800" border="0">
<tr>
<td colspan="2" style="background-color:#eeeeee;">
</td>
</tr>
<tr>
<td style="background-color:#eeeeee;height:200px;width:400px;">
<button id="rect">Rectangle</button><br>
<button id="small">Small</button><br>
<button id="big">Big</button><br>
<button id="rotate">RotateRight</button><br>
<button id="rotate2">RotateLeft</button><br>
<button id="delete">Delete</button><br>
</td>
<td>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script type="text/javascript" src="example_kinetic.js"></script>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#eeeeee;text-align:center;">
Copyright © ceng314animation.wordpress.com/</td>
</tr>
</table>
</body>
</html>
And this is the js part:
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
boardBlankArray = [];
var rect, myRect;
var i = 1;
document.getElementById('rect').addEventListener('click', function() {
rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50,25],
draggable: true,
id:"rect"+i
});
i=i+1;
rect.setListening(true);
boardBlankArray[i] = rect;
// add the shape to the layer
layer.add(boardBlankArray[i]);
stage.add(layer);
boardBlankArray[i].on("click",function(){
alert(this.attrs.id);
//myRect = stage.getChildren()[i];
});
}, false);
document.getElementById('big').addEventListener('click', function(){
rect.setWidth(rect.getWidth()+10);
rect.setHeight(rect.getHeight()+10);
rect.setListening(true);
stage.add(layer);
}, false);
document.getElementById('small').addEventListener('click', function() {
rect.setListening(true);
rect.setWidth(rect.getWidth()-10);
rect.setHeight(rect.getHeight()-10);
stage.add(layer);
}, false);
document.getElementById('rotate').addEventListener('click', function() {
rect.setListening(true);
rect.rotate(Math.PI/4);
stage.add(layer);
}, false);
document.getElementById('rotate2').addEventListener('click', function() {
rect.setListening(true);
rect.rotate(-Math.PI/4);
stage.add(layer);
}, false);
document.getElementById('delete').addEventListener('click', function() {
layer.remove(rect);
stage.add(layer);
}, false);
It looks like #jing3142's answer worked for #user1422167, but I wanted to post this answer here as the other answer uses an unconventional approach to selecting a node in KineticJS.
The KineticJS way of selecting a node would be to use:
event.targetNode
Source: http://www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/
layer.on('click', function(evt) {
// get the shape that was clicked on
var shape = evt.targetNode;
alert('you clicked on \"' + shape.getName() + '\"');
});
Using var shape = evt.targetNode;, you can call all of your KineticJS methods on the KineticJS Node. In this example the tutorial calls the getName method: shape.getName().
Also, see more about KineticJS events here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/
UPDATE
KineticJS 5.0.1 and before
var shape = evt.targetNode;
KineticJS 5.1.0+
var shape = evt.target;
When you click on a rectangle you need to make this the active rectangle. Use myrect as variable for currently active rectangle
Make the following changes to your code, identified with //<<<<<<<<<<<<<<<<<<<<<
Note boardBlankArray is not necessary
document.getElementById('rect').addEventListener('click', function() {
rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50,25],
draggable: true,
id:"rect"+i
});
i=i+1;
myrect=rect //<<<<<<<<<<<<<<sets recently created rectangle as active
rect.setListening(true);
// add the shape to the layer
layer.add(rect);
stage.add(layer);
rect.on("click",function(){ //<<<<<<<<<<<
myRect = this; //<<<<<<<<<<<<<<<<<<<<<< sets clicked on rectangle as active
});
}, false);
document.getElementById('big').addEventListener('click', function(){
myrect.setWidth(myrect.getWidth()+10); //<<<<<<<<<uses currently active rectangle
myrect.setHeight(myrect.getHeight()+10); //<<<<<<<uses currently active rectangle
myrect.setListening(true);
stage.add(layer);
}, false);
You need to change rect to myrect in all following function calls
I want to add images on canvas by using library Kinetic.js
The images are loaded from a database after I create the canvas. How I can bind this canvas with the elements that are created after the canvas?
JS Fiddle
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design</title>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.min.js" type="text/javascript"></script>
<style>
#wrapper{
width:300px;
height:200px;
margin:auto;
border-radius: 15px;
border: 4px solid black;
}
#container{
height:120px;
width:100%;
border:1px solid red;
}
#items, #cliparts{
height:55px;
border:1px solid green;
width:100%;
}
#items img, #cliparts img {
max-height:50px;
max-width:40px;
padding: 0 5px;
border:2px double white;
}
#items img:hover, #cliparts img:hover{
border:2px double blue;
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container"> </div>
<div id="cliparts">
</div>
</body>
</html>
JavaScript
$(function() {
var stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 100
});
var layer = new Kinetic.Layer();
var clip_group = new Kinetic.Group({
x: 20,
y: 10,
draggable: true,
});
});
$('#cliparts').append('<img class="clips" id="clip1" src="http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png">');
$('#clip1').live('click', function(){
var imgObj = new Image();
imgObj.src= 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';
imgObj.onload = function(){
var clip_image = new Kinetic.Image({
x: 0,
y: 0,
image: imgObj,
width: 150,
height: 138,
name: "image",
});
// how to access the following elements
clip_group.add(clip_image);
layer.add(clip_group);
stage.add(layer);
stage.draw();
};
});
Im not a JQuery person and bad at technical terms so please excuse me if I get something wrong in this explenation, but rest assured the code will work ;)
$(a) is like saying window.onload do a, well you say a is an anonymous function.
With an anonymous function any variables in it will only be in the scope of itself and not window or global.
Later on your trying to accese variables as if they are global or in the scope of window.
So...you can either move all your code into that function or in that function make the variables you want accesed outside of it global.
Here's a few of examples...
Pass the window object to the anonymous function and declare the variables you want global against that...
$(function(a) {
a.stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 100
});
a.layer = new Kinetic.Layer();
a.clip_group = new Kinetic.Group({
x: 20,
y: 10,
draggable: true,
});
}(window));
http://jsfiddle.net/j234L/1/
Declare your variables against the window object directly...
$(function() {
window.stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 100
});
window.layer = new Kinetic.Layer();
window.clip_group = new Kinetic.Group({
x: 20,
y: 10,
draggable: true,
});
});
http://jsfiddle.net/j234L/2/
Put everything in the onload function....
$(function() {
window.stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 100
});
window.layer = new Kinetic.Layer();
window.clip_group = new Kinetic.Group({
x: 20,
y: 10,
draggable: true,
});
$('#cliparts').append('<img class="clips" id="clip1" src="http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png">');
$('#clip1').live('click', function() {
var imgObj = new Image();
imgObj.src = 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';
imgObj.onload = function() {
var clip_image = new Kinetic.Image({
x: 0,
y: 0,
image: imgObj,
width: 150,
height: 138,
name: "image",
});
// how to access the following elements
clip_group.add(clip_image);
layer.add(clip_group);
stage.add(layer);
stage.draw();
};
});
});
http://jsfiddle.net/j234L/3/