I am creating a circle using SVG
var gauge = mapSvg.circle(center['x'], center['y'], 85).attr({'stroke-width': 3, 'stroke': 'black', 'fill': 'white'});
It is in for loop, this circle created three times. I have added ontouchstart on its click
gauge.node.ontouchstart = function () { alert("hi>>>>>") }
but this alert is not showing.
This should work...
var r = Raphael("blah",200,200);
var c = r.circle(100,100,100).attr({fill: 'red' }).touchstart( function() { alert('hi') });
jsfiddle http://jsfiddle.net/7c56E/
Related
I'm trying to display more than 6000 Polygons on a mobile device.
Currently, I'm doing this with SVG paths in Android WebView using the d3.js library.
It works but I have to deal with performance issues, my map becomes very laggy when I drag my map or zoom.
My Idea now is to try the same with pixijs. My data comes originally from ESRI Shapefiles. I'm convert these Shapefiles to GeoJSON and then to SVG. My array of vertices looks like this, which I'm trying to pass to the drawPolygon function
0: 994.9867684400124
1: 22.308409862458518
2: 1042.2789743912592
3: 61.07148769269074
But when I try to render these polygon nothing being displayed. This is my code:
var renderer = PIXI.autoDetectRenderer(1800, 1800, { backgroundColor: 0x000000, antialias: true });
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
var totalShapes = feat.features.length;
for (var i = 1; i <= totalShapes -1; i++) {
var shape = feat.features[i];
var geometry = shape.geometry.bbox;
graphics.beginFill(0xe74c3c);
graphics.drawPolygon([ geometry]);
graphics.endFill();
stage.addChild(graphics);
renderer.render(stage);
}
Can someone help me or could suggest me a different way?
I have not seen that way of initializing a pixie project.
Usually you add the application to the html document like:
var app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);
If you do this you can add your draw calls to the setup of the application:
app.loader.load(startup);
function startup()
{
var g = new PIXI.Graphics();
g.beginFill(0x5d0015);
g.drawPolygon(
10, 10, 120, 100, 120, 200, 70, 200
);
g.endFill();
app.stage.addChild(g);
}
This will render the polygon once.
I need to position text inputs at various places on a KonvaJS layer. I found the following code at https://konvajs.github.io/docs/sandbox/Editable_Text.html and I'm trying to understand the textPosition, stageBox, and areaPosition vars in this code. I want my stage centered in the browser window, but when I do that, the textarea (activated on dblclick) pops up way off to the left. I can't get a console readout of the x/y coordinates, so I can't visualize how the positioning works &, thus, how to change it. Can anyone explain, or point me in the right direction?
var text_overlay = new Konva.Layer();
stage.add(text_overlay);
var textNode = new Konva.Text({
text: 'Some text here',
x: 20,
y: 50,
fontSize: 20
});
text_overlay.add(textNode);
text_overlay.draw();
textNode.on('dblclick', () => {
// create textarea over canvas with absolute position
// first we need to find its position
var textPosition = textNode.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();
var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};
// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = textNode.text();
textarea.style.position = 'absolute';
textarea.style.top = areaPosition.y + 'px';
textarea.style.left = areaPosition.x + 'px';
textarea.style.width = textNode.width();
textarea.focus();
textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode.text(textarea.value);
text_overlay.draw();
document.body.removeChild(textarea);
}
});
})
// add the layer to the stage
stage.add(text_overlay);
UPDATE: I solved part of the problem--the textarea showing up way out of position. You need to use 2 divs in the HTML file instead of one, like so:
<div id="containerWrapper" align="center"><div id="container"></div></div>
Thanks to Frens' answer on Draw border edges of the Konvajs container Stage in html for that one!
I'm importing several svgs that are all created from the same image and layered on top of each other. I would like to add text centered over a certain svg/textarea path. And then scale textarea to fit the text provided with a min size. And ive confused myself. I have no idea anymore? I deleted everything and started over direction would be very helpful. Heres what i got.
var canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL('/1-man.svg', function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});
fabric.loadSVGFromURL('/1-man-cutout.svg', function(objects, options)
{
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});
fabric.loadSVGFromURL('/textarea.svg', function(objects, options) {
var obj2 = fabric.util.groupSVGElements(objects, options);
canvas.add(obj2).renderAll();
});
var text = new fabric.Text("Hello", {
fontFamily: 'ubuntu',
fontSize: 300,
textAlign: "center",
});
canvas.add(text);
Brain was dead i suppose.... took about a min this morning.. Ill keep it for a lesson on sleeping on it.
text.set('left', (objects[0].width - text.width)/2);
text.set('top', objects[0].top + 5);
canvas.add(obj2, text).renderAll();
I am trying to simulate gradually "filling" (like water filling a cup) an element in SVG. I run into trouble with mask. For the following, assume inclusion of snap.svg-min.js:
<script>
var s = Snap(500,500);
var a = s.rect(0,100,100,100);
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "white"
});
a.animate({transform: 't0, -100'}, 500, mina.easin);
a.attr({
mask: b
});
</script>
The mask in the a.attr clips the image initially, and shifts that up. I want to fill the ellipse going up.
Somewhat like the inverse of the following:
<script>
var s = Snap(500,500);
var a = s.rect(0,100,100,100);
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "white"
});
a.animate({transform: 't0, -100', mask: b}, 500, mina.easin);
</script>
You're partly there, there's a few different ways, you could probably also use a clip rather than a mask, but here's the way along the lines I think you were trying...
Swap the mask around..
var a = s.rect(0,0,120,120).attr({ fill: 'white', transform: 't0,100' });
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "red",
mask: a
});
a.animate({transform: 't0,60' }, 2000, mina.easin)
jsfiddle
So SVG and expecially Snap.svg is very new to me an I am stuck on trying to get my svg object to animate along a defined path.
I have setup a fiddle showing what I have been able to accomplish so far:
http://jsfiddle.net/k1L0g5j2/1/
// ---------
// SVG C
// ---------
var snapC = Snap("#svgC");
// SVG C - "Squiggly" Path
var myPathC = snapC.path("M1462,170c0,0,42,282-236,290s-270-68-506,60s-273.7,70.4-466-160C32,94-232,170-240,358c0,420.4,498-272,598-68").attr({
fill: "none"
});
// SVG C - Draw Path
var lenC = myPathC.getTotalLength();
// SVG C - Triangle (As Polyline)
var Triangle = snapC.polyline("0,30 15,0 30,30");
Triangle.attr({
id: "plane",
fill: "#fff"
});
var triangleGroup = snapC.g(Triangle); // Group polyline
setTimeout(function () {
Snap.animate(0, lenC, function (value) {
movePoint = myPathC.getPointAtLength(value);
triangleGroup.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y - 15) + 'r' + (movePoint.alpha - 90));
}, 4500, mina.easeinout);
});
But I need to change this triangle to be another SVG object (moth.svg). I can't figure out how this is done.