I want to add multiple text on my canvas using click of a button but as i click the button again it reload s the canvas and as loaded my first text again here is my code....is there any better way to do it.???
function text()
{
var m,n;
m=150;
n=60;
var tex=document.getElementById("tex");
var tex1=document.getElementById("tex1");
var te=tex.value;
var te1=tex1.value;
var canvas=new fabric.Canvas('can');
var text=new fabric.Text( te ,{
top: m,
left: n
});
canvas.add(text);
}
function text2()
{
var m,n;
m=150;
n=60;
var tex1=document.getElementById("tex1");
var te1=tex1.value;
var canvas=new fabric.Canvas('can');
var text1=new fabric.Text( te1 ,{
top: m,
left: n
});
canvas.add(text1);
}
finally i got it i dont know where i was making mistake but finally this code of piece is working for me but still can any body tell me my mistake
<script>
$(document).ready(function(e) {
var can=new fabric.Canvas('can');
$("#d").click(function(e) {
rect=new fabric.Text('New Text',{
top:Math.floor(Math.random()*350+1),
left:Math.floor(Math.random()*250+1),
fill:'red'
});
can.add(rect);
});
});
</script>
<body>
<canvas id="can" width="700" height="500" style=" border:0.2em solid #000;" > </canvas>
<div class="controls">
<button id="d" onclick="text()">ADD TEXT</button>
</div>
Related
I'm trying to follow the Fabric.js tutorial to setBackgroundImage to one of a few images I have associated with the buttons and am getting some weirdness. Basically, the buttons 1 and 3 are both slow/unresponsive/take two clicks to take effect, and button two doesn't want to load locally or via Imgur. Anyways, I'm using Fabric.js v. 1.7.22 and jQuery 3.3.1.
var canvas = new fabric.Canvas('canvas');
canvas.setHeight(400);
canvas.setWidth(400);
$("#one").click(function(event) {
canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png');
canvas.renderAll();
});
$("#two").click(function(event) {
canvas.setBackgroundImage('https://i.imgur.com/4Ut8gsw.png');
canvas.renderAll();
});
$("#three").click(function(event) {
canvas.setBackgroundImage('https://i.imgur.com/2S08Y3b.jpg');
canvas.renderAll();
});
canvas {
border: 1px solid #dddd;
}
button {
margin-top: 20px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id="canvas"></canvas>
<button id="one">
One
</button>
<button id="two">
Two
</button>
<button id="three">
Three
</button>
What is going on here? Thanks in advance.
setBackgroundImage accepts three arguments.
url
callback
options for image.
call renderAll() inside the callback.
var canvas = new fabric.Canvas('canvas');
canvas.setHeight(400);
canvas.setWidth(400);
$("#one").click(function(event) {
canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png',function(){
canvas.renderAll();
},{
width:canvas.width,
height:canvas.height
});
});
$("#two").click(function(event) {
canvas.setBackgroundImage('https://i.imgur.com/4Ut8gsw.png',function(){
canvas.renderAll();
},{
width:canvas.width,
height:canvas.height
});
});
$("#three").click(function(event) {
canvas.setBackgroundImage('https://i.imgur.com/2S08Y3b.jpg',function(){
canvas.renderAll();
},{
width:canvas.width,
height:canvas.height
});
});
canvas {
border: 1px solid #dddd;
}
button {
margin-top: 20px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id="canvas"></canvas>
<button id="one">
One
</button>
<button id="two">
Two
</button>
<button id="three">
Three
</button>
I am trying to create a button from Chimp.net that when you click on it opens an iframe with a pop up window, but I have an error in the code and I can not recognize it.
Can anybody see the problem?
This is the page where I am getting the code:
http://blog.chimp.net/chimp-custom-widget/
Code:
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"><strong>Button</strong><br> You can click on this div! It'll open the form.</div>
<script type="text/javascript">
$(document).ready(function() {
$("#custom-chimp-button").on("click", function() {
var frame = document.getElementById("chimp-form-oriol");
var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*");
frame.style.opacity = 1;
frame.style.display = "block";
});
});
</script>
You are missing the jquery.min.js reference on your page I guess. Please add it and see what you get.
Here on SO; iframe are not allowed so it won't show up in this code snippet.
$(document).ready(function() { $("#custom-chimp-button").on("click", function() { var frame = document.getElementById("chimp-form-oriol"); var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*"); frame.style.opacity = 1; frame.style.display = "block"; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"> <strong>Button</strong><br> You can click on this div! It'll open the form.</div>
I have a canvas element with some filter and I would like to print this canvas, but when I try, the print hasn't the filter effect.
HTML:
<div class="container">
<canvas id="outCanvas" width="300" height="200" style="position: absolute;">
</canvas>
<canvas id="print" width="300" height="200" style="position: absolute; left: 300px;">
</canvas>
</div>
JS:
// canvas for video frame
var outCanvas = document.getElementById('outCanvas');
var outCtx = outCanvas.getContext('2d');
var print = document.getElementById('print');
var printCtx = print.getContext('2d');
var image = new Image();
image.onload = function() {
outCtx.drawImage(image, 0, 0, 300, 200);
printCtx.drawImage(outCanvas, 0, 0, 300, 200);
}
image.src = 'http://www.beach-therapy.com/images/Arubabeach.jpg';
var filter = 'grayscale(100%) sepia(0%) contrast(130%) brightness(110%)';
$(outCanvas)
.css('filter', filter)
.css('-webkit-filter', filter);
Fiddle with the example
Anyone knows something about why this happen?
That's because you have not added filter for print div. You have added the filter only for outCanvas div.
$(print)
.css('filter', filter)
.css('-webkit-filter', filter);
Now it works. Check the demo.
Hope it helps!
I've got this code and i have to make it work without the text in the textarea.
So the code which is written in the textarea should be in the script tag and it should work. Can anybody help me because i dont really know how the eval(document.getElementById('code').value works so i dont know how to integrate it. Here is the code i am talking from:
<html>
<head>
<title>GEarthExtensions Samples - Drawing an extruded polygon</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAsc0UQXoo2BnAJLhtpWCJFBTgHOxFyKCf35LCvsI_n4URElrkIhS9MkSlm_0NZWgrKFkOsnd5rEK0Lg" type="text/javascript"></script>
<script src="extensions-0.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
var ge = null;
var gex = null;
google.load('earth', '1');
google.setOnLoadCallback(function() {
google.earth.createInstance('map3d', function(pluginInstance) {
ge = pluginInstance;
ge.getWindow().setVisibility(true);
gex = new GEarthExtensions(pluginInstance);
//gex.util.lookAt([0, 0], { range: 800000, tilt: 65 });
}, function() {});
});
/* ]]> */
</script>
</head>
<body>
<div id="map3d_container" style="width: 500px; height: 500px;">
<div id="map3d" style="height: 100%"></div>
</div>
<textarea id="code" style="font-family: monospace; width: 500px; height: 200px;">
gex.dom.clearFeatures();
var placemark = gex.dom.addPlacemark({
polygon: {
polygon: [],
extrude: true,
altitudeMode: geo.ALTITUDE_ABSOLUTE
},
style: {
line: { width: 0 },
poly: '#ff0'
}
});
var coords = placemark.getGeometry().getOuterBoundary().getCoordinates();
gex.edit.drawLineString(placemark.getGeometry().getOuterBoundary(), {
drawCallback: function(coordIndex) {
var coord = coords.get(coordIndex);
coords.setLatLngAlt(coordIndex,
coord.getLatitude(), coord.getLongitude(), 100000);
}
});
</textarea><br/>
<input type="button" onclick="eval(document.getElementById('code').value);" value="Run"/>
</body>
</html>
To run the code in script tag, you need to parse it first. DOMParser is a nice tool for that:
function run(value) {
var parser = new DOMParser();
var doc = parser.parseFromString(value,"text/html"); // create DOM from value
var code = doc.getElementsByTagName("script"); // get script tags from that DOM
if(!code.length) eval(value); // no script tag, eval the value directly
else eval(code[0].innerText); // eval the text from the first script tag
}
Test HTML code
<textarea id="code">
<script>
alert("hello");
</script>
</textarea>
<button onclick="run(document.getElementById('code').value)">Run</button>
I have been working on a online file system and I want to have users be able to drag and drop files to a new location. I don't really like how the default drag and drop visuals look so I am not using the conventional methond. This is what I have so far.
This code is in a .php file which is loaded onto the main page with jQuery
<td draggable = "true" ondragstart="dragFolder(event, \''.$folderId.'\', \''.$folderName.'\')">
<div class = "single-folder" onMouseUp = "folderDropUp(event, \''.$folderId.'\');">
<div class = "single-folder-name" id = "single-folder-name-'.$folderId.'">
<span id = "single-folder-rename-'.$folderId.'" class = "rename-folder-hover">
'.$folderName.'
</span>
</div>
</div>
</td>
Here is the dragFolder function that I have being fired from "ondragstart".
function dragFolder(e, folderId, folderName) {
var posX, posY, clicked, isDown = false;
var newFolder;
document.getElementById("folder_drag_image").setAttribute("folderId", folderId);
$(".single-folder").mousedown(function() {
clicked = true;
isDown = true;
followCursor(event);
});
$(document).mouseup(function() {
clicked = false;
$('#folder_drag_image').hide();
if(isDown){
//dropOnFolder(event, document.getElementById("folder_drag_image").getAttribute("folderId"), )
isDown = false;
}
});
$(document).mousemove(function(e) {
if(clicked == true) {
$('#folder_drag_image').show();
$('#folder_drag_image').stop(true, true);
followCursor(event);
}
});
function followCursor(e) {
clicked = true;
posX = e.pageX;
posY = e.pageY;
$('#folder_drag_image').animate({left: posX, top: posY});
}
}
function folderDropUp(e, newFolderId) {
alert(newFolderId);
isDown = true;
}
Basically what it does is it does is when the mouse goes down over a folder div it shows a fake dragging folder with the id of "folder_drag_image" which follows the mouse until the mouse goes up.
The problem comes here when I want to release the folder ontop of the new folder it will be put in. Here is the function for that.
function folderDropUp(e, newFolderId) {
alert(newFolderId);
isDown = true;
}
I took out the ajax because that is not part of the problem. If you look back up the the first code snippet there is a "onMouseUp" listener which triggers a "folderDropUp" event.
The problem is that if I drag my mouse onto folder with the fake drag image the folderDropUp function does not fire. If I just drag my mouse from anywhere else and it does not have the fake drag image when the function will fire off.
I did try jQuery mouseup function but just got the same output.
I don't know how helpful this will be, but by using jQueryUI you could do something like this:
HTML:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<div class="single-folder">
<div class="single-folder-name" id="single-folder-name-nhaca">
<div id="single-folder-rename-nhaca" class="rename-folder-hover">
<div>Folder 1</div><div class="folder-drag-image" id="nhaca-drag-image">Folder 1</div>
</div>
</div>
</div>
</td>
<td>
<div class="single-folder">
<div class="single-folder-name" id="single-folder-name-other">
<span id="single-folder-rename-other" class="rename-folder-hover">
<div>Folder 2</div><div class="folder-drag-image" id="other-drag-image">Folder 2</div>
</span>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS:
.single-folder{
border: 1px solid black;
cursor: pointer;
width: 60px;
}
.folder-drag-image{
position: absolute;
height: 20px;
width: 60px;
border: 1px solid black;
display: none;
}
.droppable-ready-to-receive{
background-color: yellow;
}
JS:
$( document ).ready(function() {
//displaying draggable element based on hovered element
$(".single-folder").on("mouseenter", function(e){
var drag_image = $(this).find(".folder-drag-image");
drag_image.css({"display": "block", "top": $(this).offset().top + 20, "left": $(this).offset().left});
});
//resetting draggable element when moving outside the "single-folder" div
$(".single-folder").on("mouseleave", function(e){
var drag_image = $(this).find(".folder-drag-image");
drag_image.css("display", "none");
});
//resetting draggable element when not being dragged any longer
$(".folder-drag-image").draggable({
stop: function(e) {
var parent = $(this).parents(".single-folder");
$(this).css({"display": "none", "top": parent.offset().top, "left": parent.offset().left});
}
});
//defining what elements can be dropped and what to do when dropped
$(".single-folder").droppable({
accept: '.folder-drag-image',
hoverClass: "droppable-ready-to-receive",
drop: function(e, ui) {
console.log("Dropped folder " + ui.draggable.text() + " into " + $(this).find(".folder-drag-image").text());
//handle folder drop however you need from here
}
});
});
EXAMPLE:http://jsfiddle.net/skdfLk5b/3/
I'm guessing this is far from a good solution to this, but hopefully it helps somehow.