Trying to display a dashed line with KineticJS (v4.7.3). It works fine in Chrome, but in IE (v10), a normal solid line is displayed.
Here's the code:
var element = document.getElementById('target'),
stage = new Kinetic.Stage({
container: element,
width: element.offsetWidth,
height: element.offsetHeight
}),
layer = new Kinetic.Layer();
layer.add(new Kinetic.Line({
points: [10, 10, 190, 190],
stroke: 'black',
strokeWidth: 1,
dashArray: [5, 4]
}));
stage.add(layer);
And you can see the behavior for yourself in here.
Fixed in IE-11 !
Until all "bad" IE's die, you can "do-it-yourself" fairly easily for lines (less easily for curves).
You can use a custom Kinetic.Shape which gives you access to a canvas context (a wrapped context).
Code is taken from this SO post: dotted stroke in <canvas>
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
CP.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
if (dashLength==0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dx ? dy/dx : 1e15;
var distRemaining = Math.sqrt( dx*dx + dy*dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
if (dx<0) xStep = -xStep;
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
}
}
Totally off-topic: Go Wisconsin! I spent many a great summer at my grandmothers house in
Lacrosse.
Short answer: Not supported.
Via a thread here, the creator of KineticJS addresses this issue:
"[T]he dashArray property now uses the browser-implemented dashArray
property of the canvas context, according to the w3c spec. Firefox is
a little behind at the moment."
If you follow the thread, you'll discover that this was an issue for Firefox at one point, too, but that has been resolved. However, support for IE should apparently not be expected any time soon.
Related
Have simple app using Cesium. I have basic entity with ellipse graphics, moving around, and I need to display its path, using PathGraphics, but it doesn't seem to work for me.
Here's code sample.
const position = new SampledPositionProperty();
const start = [16.096912, 40.4100289];
const startTime = JulianDate.now();
position.addSample(startTime, Cartesian3.fromDegrees(...start));
const diff = 0.0002;
const [x, y] = start;
for (let i = 0; i < 10; i += 1) {
const d = JulianDate.addSeconds(startTime, i + 1, new JulianDate());
const newPos = [x + diff * (i + 1), y + diff * (i + 1)];
position.addSample(d, Cartesian3.fromDegrees(...newPos));
}
app.entities.add({
ellipse: {
semiMinorAxis: 10,
semiMajorAxis: 10,
material: Color.RED,
},
path: {
resolution: 1,
width: 5,
material: Color.YELLOW,
},
position,
});
But when I launch it all I see is moving ellipse, but no path is drawn. Everywhere I searched they say you just have to have position as SampledProperty and it will work, but it doesn't seem to work for me.
In this case, as you can see, I generate data beforehand, but I also tried adding it in runtime - same result. The only working examples i was able to find where using czml - but it doesn't fit my needs - it will be real-time app.
I found the solution by digging through Cesium Sandcastle - you have to set availability property to entity with time range you want path to be shown. Would be cool if it was covered in documentation at least in some way.
new to createjs here:
Created this fiddle: example. I would like the rect to grow from the center and not from the top left corner. I couldn't find any help, I don't know what to search for.
Code:
const PAGE_WIDTH = 150,
PAGE_HEIGHT = 75;
var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
var page = new createjs.Shape();
page.regX = PAGE_WIDTH/2;
page.regY = PAGE_HEIGHT/2;
page.x = 50;
page.y = 50;
stage.addChild(page);
var pageCommand = page.graphics
.beginFill('red')
.drawRect(0, 0, 1, 1).command;
createjs.Tween.get(pageCommand)
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT}, 700, createjs.Ease.elasticOut)
function tick() {
stage.update();
}
Thanks.
The best way is to change the registration point of your graphics so it grows from the center.
Your code:
.drawRect(0, 0, 1, 1).command;
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT})
Instead:
.drawRect(-1.-1, 2, 2);
.to({x:-PAGE_WIDTH/2, y:-PAGE_WIDTH/2, w:PAGE_WIDTH, h: PAGE_HEIGHT})
Fiddle: http://jsfiddle.net/1kjkqo2v/
[edit: I said 2 options initially, but the second (using regX and regY) wouldn't work well, since you have to tween that value as well as your size changes.]
I created this jsfiddle.
A line i connecting two elements, and I want the line to stay connected to both elements no matter where they go.
I've sort of succeeded, but with one pretty obvious error. It keeps drawing new lines instead of redrawing the existing line. Please help me on how to make it update the line position instead.
var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
var arrDots = [];
var arrLines = [];
var circle1 = new createjs.Shape().set({
x: stage.canvas.width/2,
y: 50,
cursor: "pointer",
name:"target"
});
circle1.graphics.f(createjs.Graphics.getRGB(Math.random()*0xFFFFFF))
.dc(0,0,20);
stage.addChild(circle1);
arrDots.push(circle1);
var circle2 = new createjs.Shape().set({
x: stage.canvas.width/2,
y: stage.canvas.height - 50,
cursor: "pointer",
name:"target"
});
circle2.graphics.f(createjs.Graphics.getRGB(Math.random()*0xFFFFFF))
.dc(0,0,20);
stage.addChild(circle2);
arrDots.push(circle2);
var line = new createjs.Shape().set({
graphics: new createjs.Graphics().s("#00f").mt(arrDots[0].x,
arrDots[0].y).lt(arrDots[1].x, arrDots[1].y)
});
stage.addChild(line);
arrLines.push([arrDots[0], arrDots[1], line]);
createjs.Tween.get(circle1, {loop: true}).to({x:50},
3000).to({x:stage.canvas.width/2}, 3000);
function tick(event) {
keepLineConnection();
stage.update();
}
function keepLineConnection() {
for(var i = 0; i < arrLines.length; i++) {
arrLines[i][2].graphics.mt(arrLines[i][0].x, arrLines[i][0].y).lt(arrLines[i][1].x, arrLines[i][1].y);
}
}
The reason it keeps drawing is because you keep adding commmands to the graphics. Basically, you are doing this:
graphics.mt().lt().mt().lt().mt().lt().mt().etc();
Since you are just adding new instrucitons, they will pile up over time,
and will eventually kill your processor.
An easy fix for that is to clear the graphics first before adding new ones:
graphics.clear().mt().lt();
A better approach is to use commands. Since EaselJS 0.7.0, all graphics commands are objects, and at any time you can update properties of those objects directly. For example, the MoveTo and LineTo commands both have an x and y property. Here is more info on Commands: http://blog.createjs.com/update-width-height-in-easeljs/
Here is a modified fiddle that stores of commands on the line, and then updates them on tick. I also made a few other updates, such as changing the timing mode to RAF, which is smoother than using interval-based timers at 60FPS.
https://jsfiddle.net/tck7x8u2/
// Store commands:
line.cmd1 = line.graphics.mt(0,0).command;
line.cmd2 = line.graphics.lt(0,0).command;
// Update commands:
var instr = arrLines[i],
line = instr[2];
line.cmd1.x = instr[0].x;
line.cmd1.y = instr[0].y;
line.cmd2.x = instr[1].x;
line.cmd2.y = instr[1].y;
Cheers!
Edit: Here is are some demos using that idea that I made a while back:
https://lab.gskinner.com/connections
http://jsfiddle.net/lannymcnie/2xoL08bx/
http://jsfiddle.net/lannymcnie/6rh7P/
I am well aware that google offers as part of their chart api dynamic marker icons for google maps here:
https://developers.google.com/chart/image/docs/gallery/dynamic_icons
There is just only one small problem, the whole API seems to be deprecated. Plus I would really like to have more variety because not all of the icons offer the same flexibility.
So I found this webpage:
http://mapicons.nicolasmollet.com/numbers-letters/numbers/?style=classic
The icons look nice but they are not dynamic and well my client doesn't seem to like em. So is there a differenct webpage or some other sort of service which offers neat dynamic icons?
Doesn't have to be for google maps. Can be for any purpose just be suitable for maps as well :-)
Thank you in advance!
OK, I did a project some time ago that does exactly this but its independent of google maps, even though I used it to create dynamic map markers. Here is the whole php function:
<?php
function createImage($number, $color) {
$blank = "/var/www/rbc/dashboard/images/".$color."-0.png";
//$image = #imagecreatefrompng($blank);
$image = LoadPNG($blank);
// pick color for the text
$fontcolor = imagecolorallocate($image, 255, 255, 255);
$font = 2;
$fontsize = 8;
$width = imagefontwidth($font) * strlen($number) ;
$height = imagefontheight($font) ;
$x = (imagesx($image) - $width) / 2;
$y = 5;
//white background
$backgroundColor = imagecolorallocate ($image, 255, 255, 255);
//white text
$textColor = imagecolorallocate($image, 255, 255, 255);
// preserves the transparency
imagesavealpha($image, true);
imagealphablending($image, false);
imagestring($image, $font, $x, $y, $number, $textColor);
// tell the browser that the content is an image
header('Content-type: image/png');
// output image to the browser
imagepng($image);
// delete the image resource
imagedestroy($image);
}
function LoadPNG($imgname) {
/* Attempt to open */
$im = imagecreatefrompng($imgname);
/* See if it failed */
if(!$im) {
/* Create a blank image */
$im = imagecreatetruecolor(150, 30);
$bgc = imagecolorallocate($im, 255, 255, 255);
$tc = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 150, 30, $bgc);
/* Output an error message */
imagestring($im, 1, 5, 5, 'Error loading ' . $imgname, $tc);
}
return $im;
}
if(!isset($_GET['color'])) {
$_GET['color'] = "blue";
}
if(!isset($_GET['number'])) {
$_GET['number'] = "99";
}
createImage($_GET['number'], $_GET['color']);
?>
which you show with <img src="image.php?color=red&number=2" />
HTH
How to draw a triangle in a math graph which displays X and Y axis.
To draw shapes using ActionScript2, you can use the moveTo() and lineTo() methods of the MovieClip object. You can specify line colour and thickness with lineStyle(), or make a solid shape using beginFill() and endFill().
So to draw your graph and triangle you could do the following steps:
Make a movieClip named "graph"
Define how big your graph should be (using the flash.geom.Rectangle object)
Draw a grey background using graph.beginFill(grey) and then moveTo() and lineTo()
Draw some blue lines at regular intervals for a grid
Draw the X and Y axes on the side and bottom of your grid
Make a second movieClip named "shape"
Pick 3 random points: moveTo(point1), lineTo(point2), lineTo(point3), lineTo(point1)
Here's how the code might look:
import flash.geom.Point;
import flash.geom.Rectangle;
function drawGraph(mc:MovieClip, rect:Rectangle):Void {
//this is a function to draw the graph
//draw the background
mc.beginFill(0xF8F8F8);
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.left, rect.top);
mc.lineTo(rect.right, rect.top);
mc.lineTo(rect.right, rect.bottom);
mc.lineTo(rect.left, rect.bottom);
mc.endFill();
//draw a grid
var unit:Number = 20;
mc.lineStyle(1, 0x0000FF, 20, true, "none", "round", "round");
var i:Number=rect.x;
do {
i=i+unit;
mc.moveTo(i, rect.bottom);
mc.lineTo(i, rect.top);
} while (i<rect.right);
i=rect.bottom;
do {
i=i-unit;
mc.moveTo(rect.left, i);
mc.lineTo(rect.right,i);
} while (i>rect.top);
//draw the axes
mc.lineStyle(2, 0x808080, 100, true, "none", "round", "round");
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.left, rect.top);
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.right, rect.bottom);
}
function randomPoint(rect:Rectangle):Point {
//this is a function which returns a random point within rect
var p:Point = new Point(rect.x+Math.random()*rect.width, rect.y+Math.random()*rect.height);
return p;
}
function drawTriangle(mc:MovieClip, rect:Rectangle):Void {
//this is a function to draw the triangle
// pick 3 random points within rect
var p1:Point = randomPoint(rect);
var p2:Point = randomPoint(rect);
var p3:Point = randomPoint(rect);
//connect the points to make a triangle
mc.lineStyle(3, 0xFF0000, 100, true, "none", "round", "round");
mc.moveTo(p1.x, p1.y);
mc.lineTo(p2.x, p2.y);
mc.lineTo(p3.x, p3.y);
mc.lineTo(p1.x, p1.y);
}
//make the 'graph' clip:
var myGraph:MovieClip = this.createEmptyMovieClip("myGraph", this.getNextHighestDepth());
//define the graph size:
var myRect:Rectangle = new Rectangle(50,50,300,300);
drawGraph(myGraph,myRect);//draw the graph
var myShape:MovieClip = this.createEmptyMovieClip("myShape", this.getNextHighestDepth());//make the 'shape' clip
drawTriangle(myShape,myRect);//draw a random triangle
//add a function to draw a new triangle when the graph is clicked:
myGraph.onRelease = function() {
myShape.clear();//erase the old triangle
drawTriangle(myShape,myRect);//draw a new one
}
You can click the graph to generate a new random triangle.
(source: webfactional.com)
It sounds like you need to know how the drawing API works in Flash. Your question is kind of vague, but this might help to get you started - google "Flash Drawing API" for more information.
var point1:Point = new Point (0, 0);
var point2:Point = new Point (25, -50);
var point3:Point = new Point (50, 0);
var s:Sprite = new Sprite();
s.graphics.lineStyle(1, 0xff0000);
s.graphics.beginFill(0x000000);
s.graphics.moveTo(point1.x, point1.y);
s.graphics.lineTo(point2.x, point2.y);
s.graphics.lineTo(point3.x, point3.y);
s.graphics.lineTo(point1.x, point1.y);
s.graphics.endFill();
s.graphics.lineStyle(0);
s.x = (stage.stageWidth - s.width) / 2;
s.y = ((stage.stageHeight - s.height) / 2) + 50;
addChild(s);
I hope that helps, let me know if you have any questions.
NOTE: This solution is using ActionScript 3. If you need AS2 this won't work, and off the top of my head I don't know how to help but you might just try googling "AS2 Drawing API" or something to that effect.