OK so ive been playing with this code for a bit, it basicly adds multiple images from DOM to canvas by dragging. But i cant seem to remove the image properly from the canvas on click/ tap event listener.
window.onload = function(){
var stage = new Kinetic.Stage({
container : "cantainer",
width : 475,
height : 150
});
var layer = new Kinetic.Layer();
stage.add(layer);
var con = stage.getContainer();
var dragSrcEl = null;
//image
document.getElementById("yoda").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("woman").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("nature").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("srce").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("game").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("dog").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("house").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
con.addEventListener('dragover',function(e){
e.preventDefault(); //#important
});
//insert image to stage
con.addEventListener('drop',function(e){
var image = new Kinetic.Image({
x: 30,
y: 20,
draggable : true
});
layer.add(image);
imageObj = new Image();
imageObj.src = dragSrcEl.src;
imageObj.onload = function(){
image.setImage(imageObj)
layer.draw()
};
});
}
You can add a click listener on each of your image objects and remove any image that's clicked.
image.on("click",function(){
this.remove(); // or this.destroy();
layer.draw();
});
Related
Hello I have a code where I can see on a map latitude and longitude markers, that code I did following this tutorial I would like to know how to make each marker is linked with a Polyline
This is what I have
This is what I want
Next I leave my code
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-16.342024,-71.540503),
zoom: 4.0
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('../controlador/test1.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marcadores');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('movil');
var hora = markerElem.getAttribute('hora');
var bateria = markerElem.getAttribute('bateria');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
animation: google.maps.Animation.DROP
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "MOVIL: "+type
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "HORA: "+hora
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "BATERIA: "+bateria+"%"
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap">
</script>
(At top of the code below is the XML file from which the markers are created. Copy the XML data into file and name test1.xml)
Any idea how? Thanks.
You can start off by following the examples in this Polyline doc, you can draw a line on your map connecting different locations.
Here's a sample in JSFiddle that you can check, which shows 3 locations connected by a polyline.
var flightPlanCoordinates = markerPoints; //the coordinates of your markers
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates, //set the path of the polyline to the marker positions
geodesic: true, //for the polyline to follow the curvature of the earth
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
icons: [
{icon: lineSymbol, offset: '25%'},
{icon: lineSymbol, offset: '50%'},
{icon: lineSymbol, offset: '75%'},
{icon: lineSymbol, offset: '100%'},
]
});
Please see full code in the sample fiddle. Hope it helps!
Hi nobody know how to get or maybe set the name of an image in a canvas?
i use this code to save a canvas as image, but i don't know how get the name of the image or how set .
My goal is to load a image or pdf, draw on it and save in another image or pdf.
var img = new Image();
var startimg="img/green.jpg";
$scope.image=startimg;
img.src = startimg;
var sourceCanvas = document.getElementById('signatureCanvas');
var context = sourceCanvas.getContext('2d');
var canvasFirma = document.getElementById('tempCanvas');
var contextFirma = canvasFirma.getContext('2d');
img.onload = function() {
sourceCanvas.width = img.width;
sourceCanvas.height = img.height;
//context.drawImage(img, 0, 0);
console.log('The canvas size is '+ sourceCanvas.width +'*'+ sourceCanvas.height);
console.log('The image size is '+ img.width +'*'+ img.height);
context.drawImage(img, 0, 0, img.width, img.height);
}
var signaturePad = new SignaturePad(canvasFirma);
$scope.clearCanvas = function() {
signaturePad.clear();
}
$scope.saveCanvas = function() {
$scope.clearSave = false;
$scope.FirmaBtn = true;
$scope.canvasSi = false;
//salvo la firma
var firma = signaturePad.toDataURL("image/jpeg");
$timeout( function(){
$scope.signature = firma;
if ($scope.signature) {
$scope.resizeCanvas();
}
}, 200);
};
//to merge canvas and image
var canvasF = document.getElementById("canvasFinale");
var ctx = canvasF.getContext("2d");
var img1 = loadImage('img/green.jpg', main);
/*this one "image.jpg" i need to get the name or give new one because this is for example*/
var img2 = loadImage('img/image.jpg', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if(imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0);
//questo da la transparenza magari toglierlo
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 0, 0);
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
/*
canvasF.width = img.width;
canvasF.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
*/
console.log("src "+ src);
return img;
}
$timeout( function(){
$scope.signature = firma;
if ($scope.signature) {
$scope.resizeCanvas();
}
}, 200);
};
$scope.resizeCanvas = function () {
canvasFirma.width = canvasFirma.offsetWidth * ratio;
canvasFirma.height = canvasFirma.offsetHeight * ratio;
canvasFirma.getContext('2d').scale(ratio, ratio);
console.log("resize canvasFirma 2");
};
You can download the canvas image with a custom name by making use of the download attribute.
Codepen Example
var canvas = $("#canvas")[0];
var ctx = canvas.getContext('2d');
ctx.fillRect(10,10,10,10);
$("#download").on("click", function(e) {
$("#download").attr("download", "CustomName.png");
$("#download").attr("href", canvas.toDataURL().replace(/^data:image\/[^;]/, 'data:application/octet-stream'));
});
So I have a functioning code (example here) to create a split screen of half google map Hybrid view and then when you click somewhere on that map (left side) then (right side) opens street view for that location.
I want to have a marker on the hybrid map side that when clicked on opens an info window on that side and then the street view for that location on the right side of the screen. But I can't seem to figure out how to code in that marker to open as an info window/bubble on the left side map?
Here's the code currently (including the mistake I've made as it doesn't work):
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var myCenter = new google.maps.LatLng(42.315126 , -72.63455);
var DoYouFeel = new google.maps.LatLng(42.315148 , -72.634429)
var sv = new google.maps.StreetViewService();
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map
var mapOptions = {
center: myCenter,
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Set up the markers
var marker = new google.maps.Marker({
position: DoYouFeel,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
bubble = new google.maps.InfoWindow({
content: '<div id="mydiv"><br><embed src="Do You Feel....mov" width="720" height="576" align="center"><br><br></div>'
})
bubble.open(map, marker);
});
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
google.maps.event.addListener(map, 'click', function(event) {
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
google.maps.event.addListener(marker, 'click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
alert('Street View data not found for this location.');
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I have a KineticJS shape that draws a bezier curve that is wider on one end. It draws correctly, but I can't yet detect a 'mouseover' event on it. I have created a small JSFiddle demo of the anomaly, at:
http://jsfiddle.net/VikR0001/nZYxL/6/
How can I detect 'mouseover' events on this shape?
Thanks very much in advance to all for any info!
var mainLayer;
//bezier curve code:
//http://stackoverflow.com/questions/8325680/how-to-draw-a-bezier-curve-with-variable-thickness-on-an-html-canvas
//draw a bezier curve that gets larger as it flows
//adapted for use with KineticJS
function drawBezierCurve() {
var centerLeft = new Object();
centerLeft.x = 100;
centerLeft.y = 400;
var centerRight = new Object();
centerRight.x = 400;
centerRight.y = 100;
var thicknessLeft = 1;
var thicknessRight = 50;
var color = "#000";
var context = mainLayer.getContext();
var leftUpper = {
x: centerLeft.x,
y: centerLeft.y - thicknessLeft / 2
};
var leftLower = {
x: centerLeft.x,
y: leftUpper.y + thicknessLeft
};
var rightUpper = {
x: centerRight.x,
y: centerRight.y - thicknessRight / 2
};
var rightLower = {
x: centerRight.x,
y: rightUpper.y + thicknessRight
};
var center = (centerRight.x + centerLeft.x) / 2;
var cp1Upper = {
x: center,
y: leftUpper.y
};
var cp2Upper = {
x: center,
y: rightUpper.y
};
var cp1Lower = {
x: center,
y: rightLower.y
};
var cp2Lower = {
x: center,
y: leftLower.y
};
var bezierCurve = new Kinetic.Shape({
drawFunc: function (canvas) {
var context = mainLayer.getContext();
context.fillStyle = color;
context.beginPath();
context.moveTo(leftUpper.x, leftUpper.y);
context.bezierCurveTo(cp1Upper.x, cp1Upper.y, cp2Upper.x, cp2Upper.y, rightUpper.x, rightUpper.y);
context.lineTo(rightLower.x, rightLower.y);
context.bezierCurveTo(cp1Lower.x, cp1Lower.y, cp2Lower.x, cp2Lower.y, leftLower.x, leftLower.y);
context.lineTo(leftUpper.x, leftUpper.y);
context.fill();
canvas.stroke(this);
},
fill: color,
stroke: color,
strokeWidth: 1
});
bezierCurve.on('mouseover', function (evt) {
document.body.style.cursor = "pointer";
$("#debug").html("MOUSEOVER DETECTED."); //<==NEVER CALLED
});
bezierCurve.on('mouseout', function (evt) {
document.body.style.cursor = "default";
$("#debug").html("MOUSEOUT DETECTED."); //NEVER CALLED
});
bezierCurve.setAttrs({
'leftUpper': leftUpper,
'leftLower': leftLower,
'rightUpper': rightUpper,
'rightLower': rightLower,
'cp1Upper': cp1Upper,
'cp2Upper': cp2Upper,
'cp1Lower': cp1Lower,
'cp2Lower': cp2Lower
});
mainLayer.add(bezierCurve);
mainLayer.draw();
$("#debug").html("bezier curve has been drawn onscreen.");
}
$(document).ready(function () {
var stage = new Kinetic.Stage({
container: 'canvasContainer',
width: 500,
height: 500
});
mainLayer = new Kinetic.Layer('main');
stage.add(mainLayer);
mainLayer.draw();
drawBezierCurve();
});
Can you define it as an SVG element, and just give that an onmouseover?
Fixed it! Changes are shown at the jsFiddle link in the original post.
//FIXED!
//OLD VERSION: DOES NOT WORK
// var bezierCurve = new Kinetic.Shape({
// drawFunc: function (canvas) {
// var context = mainLayer.getContext();
// context.fillStyle = color;
// context.beginPath();
// context.moveTo(leftUpper.x, leftUpper.y);
// context.bezierCurveTo(cp1Upper.x, cp1Upper.y, cp2Upper.x, cp2Upper.y, rightUpper.x, rightUpper.y);
// context.lineTo(rightLower.x, rightLower.y);
// context.bezierCurveTo(cp1Lower.x, cp1Lower.y, cp2Lower.x, cp2Lower.y, leftLower.x, leftLower.y);
// context.lineTo(leftUpper.x, leftUpper.y);
// context.closePath();
// context.fill();
// canvas.stroke(this);
// },
// fill: color,
// stroke: color,
// strokeWidth: 1
// });
//NEW VERSION: WORKS!
var bezierCurve = new Kinetic.Shape({
drawFunc: function (canvas) {
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(leftUpper.x, leftUpper.y);
context.bezierCurveTo(cp1Upper.x,cp1Upper.y, cp2Upper.x,cp2Upper.y, rightUpper.x,rightUpper.y);
context.lineTo(rightLower.x, rightLower.y);
context.bezierCurveTo(cp1Lower.x,cp1Lower.y, cp2Lower.x,cp2Lower.y, leftLower.x,leftLower.y);
context.lineTo(leftUpper.x, leftUpper.y);
context.fill();
canvas.stroke(this);
},
fill: color,
stroke: color,
strokeWidth: 3
});
Hello I am new to jQuery and I have a problem!
I want to scroll to the top, in a page that is loaded via AJAX call.
This works (test):
$(document).on('click', '#top_icon', function() {
alert('ok');
});
But this is not working (this is what I want to achieve):
$(document).on('click', '#top_icon', function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
Try this,
$(document).on('click', '#top_icon', function() {
$('html, body').animate({'scrollTop': '0px'}, 800);
return false;
});
scrollTop is undefined in your case.
I am not sure about jQuery, but scrollTop is not a CSS property and therefor might not be part of the properties that can be animated.
But you can create a simple animation for this yourself:
var startValue = 0;
var endValue = 0;
var duration = 800;
var distance = 0;
var velocity = 0;
var step = 0;
var endTime = 0;
var animate = function() {
var elapsedTime = new Date().getTime() - step;
document.body.scrollTop += velocity * elapsedTime;
step = new Date().getTime();
if (step > endTime)
document.body.scrollTop = endValue;
else
setTimeout(animate, 15);
}
yourButton.onclick = function() {
startValue = document.body.scrollTop;
distance = endValue - startValue;
velocity = distance / duration;
step = new Date().getTime();
endTime = step + duration;
animate();
};
Here is a fiddle: http://jsfiddle.net/pXvQG/12/, animate by scrolling down and click the body.