I tried the code:
paper.rect(100, 100, 300,300).animate({transform :"t0,0r120t-0,0"}, 2000, "bounce");
in the stie http://raphaeljs.com/playground.html
And it workes greate, but in my code I cant get the object to rotate on place. Please help? The one I want to rotate is the var blueRect.
Tis is my code:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>SVG/VLM</title>
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<style>
#artboard{
width: 240px;
height: 150px;
}
</style>
<script src="raphael.js"></script>
<script type="text/javascript">
var paper;
var blueRect;
var redRect;
var rightButton;
var stopButton;
var xEnd;
function init(){
paper = Raphael("artboard");
// Bakgrunden
var background = paper.rect( 0, 0, "100%", "90px", 0 );
background.attr({fill: "#f3f3ff", "stroke-width": 1, "stroke": "#000"});
// Blåa rektangeln
blueRect = paper.rect( 35, 20, "50px", "50px", 0);
blueRect.attr({fill: "#aaaaff", "stroke-width": 3, "stroke": "#000"});
// Röda rektangeln
redRect = paper.rect( 150, 20, "50px", "50px", 0);
redRect.attr({fill: "#ffaaaa", "stroke-width": 3, "stroke": "#000"});
//Knapparna
rightButton = paper.rect(5, 100, "50px", "22px", 0);
rightButton.attr("fill", "#ff0000");
leftButton = paper.rect(65, 100, "50px", "22px", 0);
leftButton.attr("fill", "#00ff00");
sidewaysButton = paper.rect(125, 100, "50px", "22px", 0);
sidewaysButton.attr("fill", "#0000ff");
stopButton = paper.rect(185, 100, "50px", "22px", 0);
stopButton.attr("fill", "#000");
xEnd = 150;
// Kör funktionen sideways()
go();
};
function go(){
rightButton.click(
function rotateRight(){
blueRect.animate({transform:"t0,0r120t-0,0"}, 2000, "bounce");
});
sidewaysButton.click(
function sine(){
if( xEnd == 150 )
xEnd = 50;
else
xEnd = 150;
redRect.animate( {x: xEnd}, // Attributet som ska animeras följt av till vilket värde den ska animeras
1000, // Tiden
"sine", // Ease funktion
function (){ sine(); } // Anropar sig själv igen för att upprepa funktionen.
);
});
stopButton.click(
function stop(){
redRect.stop();
});
}
</script>
</head>
<body onload="init()">
<div id="artboard"></div>
</body>
</html>
And I'm sorry about all the Swedish comments, hope that dosen't matter for you to understand my code.
In this particular case you would need to get it to rotate around its center by specifying the centre points, so the transform would look like...
blueRect.animate({transform:"r120,60,45"}, 2000, "bounce")
If its variable where it will be, you could get the centre point from getBBox()
jsfiddle
Related
I started off with this example: https://www.amcharts.com/demos/floating-bar-chart/ but want the floating-aspect also cover a date axis. This way I will be able to color a rectangular area in my charts.
I made the following changes:
Changed the x-axis to a date axis
Changed the y-axis to a value axis
Changed the data correspondingly
Changed the data-fields in the series-definition to use openValueXField, valueXField for the dates and openValueYField and valueYField for the values
Something (vertical colored lines) are displayed in the most left part of the chart but no colored areas.
When using values for both axes it works perfectly but not with dates. I hope some of you knows what is wrong here. The Amcharts Demo's only provide example with one axis.
The two source codes are included hereafter.
//
// Source Code for two numeric axis -> working
//
<meta content="text/html;charset=utf-6" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: 8,
endTime: 11,
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: 10,
endTime: 13,
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
91,31 43%
//
// Source Code for one date and one numeric axis -> NOT working
//
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: new Date(2021, 1, 28),
endTime: new Date(2021, 3, 17),
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: new Date(2021, 2, 5),
endTime: new Date(2021, 5, 7),
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {
pan:"zoom",
minimumDate: new Date(2021, 1, 18),
maximumDate: new Date(2021, 7, 20),
}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
94,3 97%
I try to bind a click event on symbol in a svg.
When a element spinns in the symbol, the click event is not fired, stops/pauses the animation, the click event fires.
How can i fix this, that the click events get fired every time i click on it, regardless if the animations run or not.
.as-console-wrapper{
display: none!important;
}
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Schematic</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
<!--<script src="assets/js/vue.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.common.dev.min.js"></script>
<script>
const color = {
blue: "#007bff",
indigo: "#6610f2",
purple: "#6f42c1",
pink: "#e83e8c",
red: "#dc3545",
orange: "#fd7e14",
yellow: "#ffc107",
green: "#28a745",
teal: "#20c997",
cyan: "#17a2b8",
white: "#fff",
gray: "#6c757d",
"gray-dark": "#343a40",
primary: "#007bff",
secondary: "#6c757d",
success: "#28a745",
info: "#17a2b8",
warning: "#ffc107",
danger: "#dc3545",
light: "#f8f9fa",
dark: "#343a40"
};
let baseColor = {
background: "#000",
"fill-opacity": 0.5,
stroke: color.white,
"stroke-width": 1,
"stroke-opacity": 0.5
};
let pipeColor = {
fill: color.blue,
opacity: 1
};
let pumpColor = {
fill: color.gray,
"fill-opacity": 0.8
}
document.addEventListener("DOMContentLoaded", () => {
// parent drawing
let draw = SVG().addTo('#schematic').size("100%", 500);
let pumpGroup = draw.symbol();
pumpGroup.click(function () {
alert("Pump clicked!");
});
let height = 50;
let radius = 30;
let chase = pumpGroup.rect(80, height).attr(baseColor).move(0, 0); // 520, 370
let motor1 = pumpGroup.circle(radius).attr(pumpColor).move(45, (height / 2) - radius / 2); // 525, 380
let motor2 = pumpGroup.circle(radius).attr(pumpColor).move(5, (height / 2) - radius / 2); // 565, 380
let fan1 = pumpGroup.image("https://cdn0.iconfinder.com/data/icons/screw/512/fan-ventilator-propeller-rotor-motion-512.png").scale(0.05).move(940, 240); //.animate().rotate(360, 256 + 940, 256 + 240).loop();
let fan2 = pumpGroup.image("https://cdn0.iconfinder.com/data/icons/screw/512/fan-ventilator-propeller-rotor-motion-512.png").scale(0.05).move(140, 240);
//
// 1 = slave, 2 = master
let fant1Runner = fan1.animate(1500).ease("-").rotate(360, 256 + 940, 256 + 240).loop().timeline().pause();
let fant2Runner = fan2.animate(1500).ease("-").rotate(360, 256 + 140, 256 + 240).loop().timeline().pause();
setInterval(() => {
fant2Runner.play();
fant1Runner.play();
setTimeout(() => {
fant2Runner.pause();
fant1Runner.pause();
}, 2500)
}, 5000);
draw.use(pumpGroup).move(10, 10).click(() => {
alert("Clicked on pump!");
});
});
</script>
</head>
<body>
<div id="app">
<div id="schematic"></div>
</div>
</body>
</html>
For demsonstation i create a minimal snippet.
The fans start spinning after 5sec, run then for 2.5 sec and stops.
As written above, when the fans spin, no click fires.
Thanks for any advise.
I have this code:
this.posFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-5.7,43.5])),
name: 'pos'
});
var posStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [10, 10],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: 'car.svg'
})
});
this.posFeature.setStyle(posStyle);
this.markerPosSource = new ol.source.Vector({features: [this.posFeature]});
this.layerPos = new ol.layer.Vector({source: this.markerPosSource});
map.addLayer(this.layerPos);
I would like to rotate the icon with an animation (in its rotation). Is it possible? If not, how to rotate without animation?
Thanks in advance!
To smoothly animate a rotation calculate the required rotation based on elapsed time each time the map rendered, e.g. for a complete rotation every 10 seconds:
<!DOCTYPE html>
<html>
<head>
<title>Icon Symbolizer</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([0, 0]),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://openlayers.org/en/v6.4.3/examples/data/icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
layers: [vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
var startTime = new Date().getTime();
map.on('rendercomplete', function(e) {
var elapsedTime = e.frameState.time - startTime;
var rotation = elapsedTime / 10000 * Math.PI;
iconStyle.getImage().setRotation(rotation);
iconFeature.changed();
});
</script>
</body>
</html>
To rotate it use rotation (NB use radians not degrees)
var posStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [10, 10],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: 'car.svg',
rotation: Math.PI/2
})
});
I have Lat & Long. How can i get West/East | North/South from GPS?
Screenshot attached: ScreenShot
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/design/js/jquery-autocomplete/jquery.autocomplete_geomod.js"></script>
<script type="text/javascript" src="/design/js/jquery-autocomplete/geo_autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="/design/js/jquery-autocomplete/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// use all the autocomplete options as documented at http://docs.jquery.com/Plugins/Autocomplete
/* additional geo_autocomplete options:
mapkey : 'ABQ...' (required for Static Maps thumbnails, obtain a key for your site from http://code.google.com/apis/maps/signup.html)
mapwidth : 100
mapheight : 100
maptype : 'terrain' (see http://code.google.com/apis/maps/documentation/staticmaps/#MapTypes)
mapsensor : true or false
*/
$('#location').geo_autocomplete(new google.maps.Geocoder, {
mapkey: 'ABQIAAAAbnvDoAoYOSW2iqoXiGTpYBTIx7cuHpcaq3fYV4NM0BaZl8OxDxS9pQpgJkMv0RxjVl6cDGhDNERjaQ',
selectFirst: false,
minChars: 3,
cacheLength: 50,
width: 300,
scroll: true,
scrollHeight: 330
}).result(function(_event, _data) {
var coords = new google.maps.LatLng(
_data.geometry.location.lat(),
_data.geometry.location.lng()
);
$('#lat').val (_data.geometry.location.lat())
$('#lng').val (_data.geometry.location.lng())
console.log (coords.lat () + '/' + coords.lng ());
if (_data) map.fitBounds(_data.geometry.viewport);
});
});
</script>
<style>
.ac_results li img {
float: left;
margin-right: 5px;
}
</style>
<h3>jQuery geo-autocomplete Plugin Demo</h3>
<div>Location: <input type="text" id="location" /> (autocomplete)</div>
<br/>
<div id="coords">Lat:
<input id="lat" name="lat" />
Lng:
<input id="lng" name="lng" />
</div>
<br/>
East/West: if longitude < 0 then West, else East
North/South: if latitude < 0 then South else North
Explanation:
The 0-Meridian (through London/Greenwich) is the limit between west and east.
The Aequator is the limit between south and north.
in Google, coordinates are represented in decimal degrees, where the negative sign, defines E/W or N/S
I need to use kinetic in order to transform one image using the anchors. I found this example:
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
I then need to save just one image - the yoda image (id: myImg) and send off to a web service. I'm having trouble with the saving portion.
Can anyone help? I'm not sure everything is correct, as I'm getting this error on when btnsave - Object #Class has no method 'replace' index.html:187
code
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
function update(group, activeAnchor) {
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];
// update anchor positions
switch (activeAnchor.getName()) {
case "topLeft":
topRight.attrs.y = activeAnchor.attrs.y;
bottomLeft.attrs.x = activeAnchor.attrs.x;
break;
case "topRight":
topLeft.attrs.y = activeAnchor.attrs.y;
bottomRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomRight":
bottomLeft.attrs.y = activeAnchor.attrs.y;
topRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomLeft":
bottomRight.attrs.y = activeAnchor.attrs.y;
topLeft.attrs.x = activeAnchor.attrs.x;
break;
}
image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
var width = topRight.attrs.x - topLeft.attrs.x;
var height = bottomLeft.attrs.y - topLeft.attrs.y;
if(width && height) {
image.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: "#666",
fill: "#ddd",
strokeWidth: 2,
radius: 8,
name: name,
draggable: true
});
anchor.on("dragmove", function() {
update(group, this);
layer.draw();
});
anchor.on("mousedown touchstart", function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on("dragend", function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on("mouseover", function() {
var layer = this.getLayer();
document.body.style.cursor = "pointer";
this.setStrokeWidth(4);
layer.draw();
});
anchor.on("mouseout", function() {
var layer = this.getLayer();
document.body.style.cursor = "default";
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var layer = new Kinetic.Layer();
/*
* go ahead and add the groups
* to the layer and the layer to the
* stage so that the groups have knowledge
* of its layer and stage
*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 200,
height: 138,
name: "image"
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, "topLeft");
addAnchor(darthVaderGroup, 200, 0, "topRight");
addAnchor(darthVaderGroup, 200, 138, "bottomRight");
addAnchor(darthVaderGroup, 0, 138, "bottomLeft");
darthVaderGroup.on("dragstart", function() {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.yoda,
width: 93,
height: 104,
name: "image",
id: "myImg"
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, "topLeft");
addAnchor(yodaGroup, 93, 0, "topRight");
addAnchor(yodaGroup, 93, 104, "bottomRight");
addAnchor(yodaGroup, 0, 104, "bottomLeft");
yodaGroup.on("dragstart", function() {
this.moveToTop();
});
stage.draw();
$("#btnSave").click(function () {
var image = stage.get("#myImg")[0];
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: domain + '/Services/WS.asmx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert(msg.d);
}
});
});
}
window.onload = function() {
var sources = {
darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
};
loadImages(sources, initStage);
};
</script>
</head>
<body onmousedown="return false;">
<div id="container"></div>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
</body>
</html>
You might need to stringify everything,
For example:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/WS/SaveObject.asmx/fSaveToDB"),
data: JSON.stringify({ _obj: this }),
dataType: "json"
});
I had a huge problem before myself, started to work after i stringified it