there is any way use inline SVG in Icon?
var iconStyle = new ol.style.Style({
image: new ol.style.Icon( ({
src: 'img/svg.svg'
}))
});
works fine but I generate inline SVG in code
var icon = "<svg width=34 height=34 ><polyline points='17,17 17,0 13,5 17,0 21,5' fill='none' stroke='blue' stroke-width='2' transform='rotate(263,17,17)'></polyline><circle cx=17 cy=17 r=11 style='fill:rgba(51,153,102,1);' /><circle cx=17 cy=17 r=6.5 style='fill:rgba(150,150,150,1);' /></svg>";
can i use this string like a source for icon? Or there is any possible way?
You can display an overlay containing your inline SVG.
var icon = "<svg width=34 height=34 ><polyline points='17,17 17,0 13,5 17,0 21,5' fill='none' stroke='blue' stroke-width='2' transform='rotate(263,17,17)'></polyline><circle cx=17 cy=17 r=11 style='fill:rgba(51,153,102,1);' /><circle cx=17 cy=17 r=6.5 style='fill:rgba(150,150,150,1);' /></svg>";
var overlayContent = document.createElement('div');
overlayContent.innerHTML = icon;
var overlay = new ol.Overlay({
element: overlayContent,
position: [0, 0],
positioning: 'center-center'
});
map.addOverlay(overlay);
If you need to rotate your icon, you can get your overlayContent and modify his rotation like this :
overlay.getElement().style.cssText = 'transform: rotate(' + degrees + 'deg)';
I tried with an icon and put the string with "data:image/svg+xml;utf8" but there was some exception from OL3 in IE11 when I was moving my map. (Chrome was displaying everthing fine)
Anyway, using an overlay is more performant for me and I can modify the content of my icon (size, color, ...) without recreating each time an icon.
If you just need to rotate it, the ol.Style.Icon can do it on the fly; but you just need to see if there is no more bugs :)
Related
I would like to be able to add a dot at the tip of a connector in a pie highchart. (using Highcharts 5.0.10)
I learned that there are <marker> svg elements (not to be confused with the highcharts marker api) and these can be added either:
via css
as an attribute on the <path> element.
Although I don't see a way to actually apply them.
I tried appending a marker element during the render event in highcharts and then modifying the connector element to add the attribute:
render: function() {
var marker = '<marker xmlns="http://www.w3.org/2000/svg" id="circle-marker" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">'+
'<circle cx="5" cy="5" r="3" style="stroke: none; fill: red;"/>' +
'</marker>';
if (!$('#circle-marker').length) {
$('defs').append(marker);
}
$('.highcharts-data-label-connector').attr('marker-end', 'url(#circle-marker)');
}
Also tried creating a style that would point to that marker.
The more complex part of the issue is I want to make them dynamic (grab the color from the current point).
I might need to get my hands dirtier on SVG (I practically don't know a thing), but also think there is something I am missing from the Highcharts API.
EDIT: This is all done inside an AngularJS directive.
You can use Highcharts svg wrapper to create markers and attach them correctly on load event. The issue with the marker is - if you want them to have the same color as the connector,you need to create a separate marker for each - in SVG 1.1 markers do not inherit the color from the objects which refers to them (markers).
load: function () {
var renderer = this.renderer
this.series[0].points.forEach((point, i) => {
var marker = renderer.createElement('marker').add(renderer.defs).attr({
markerWidth: 10,
markerHeight: 10,
refX: 5,
refY: 5,
orient: 'auto',
id: `connector-marker-${i}`
})
renderer.circle(5, 5, 5).add(marker).attr({
fill: point.color
})
point.connector.attr({
'marker-start': `url(#connector-marker-${i})`
})
})
}
example: http://jsfiddle.net/39xvhwqo/
I'm experiencing a problem that seems to be reproduced randomly after closing Photoswipe when there is more than one image in the Slick carousel. Visually, the effect is that Photoswipe closes (disappears without any animation), then the right side of the page changes again to black with last photo viewed in Photoswipe visible, then the black background fades to transparent but seems to be still there (it prevents any buttons from being clicked).
In case it's relevant, the Photoswipe open animation don't behave like the demos either - it doesn't zoom in from the thumbnail, it just simply fades in from the center of the page.
Image of the page after problem occurs: https://i.imgur.com/a4XEMxU.png
Here is my implementation using Slick and Photoswipe together:
var carousel = $('#sc');
var pswpImages = [];
var options = {
history: false
};
var count = 0;
for (var fn in data.images) {
var pieces = fn.split('.');
var fullsize = meta_data['media'] + fn;
var thumbnail = meta_data['cache'] + pieces[0] + '_m.' + pieces[1];
carousel.append('<div><img src="' + thumbnail + '" class="sc" data-id="' + count + '"></div>');
count += 1;
$('.sc').each(function () {
$(this).on('click', function () {
options.index = $(this).data('id');
var pswpElement = document.querySelectorAll('.pswp')[0];
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, pswpImages, options);
gallery.init();
})
});
pswpImages.push({
src: fullsize,
msrc: thumbnail,
w: data.images[fn]['x'],
h: data.images[fn]['y']
});
}
// TODO: When closing gallery, get image number, and slick.GoTo that slide
carousel.slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
variableWidth: true,
centerMode: true
});
Could you provide a fiddle?
I suspect the $('.sc').each(function () needs to be outside the for loop, otherwise you are creating an on click event for every img previously created by the for loop.
1st iteration:
create 1 div, .each( ..on('click')) on that 1 img
2nd iteration:
create 2nd div, .each( ..on('click')) on the first AND the second img
..and so on.
So, in the end: clicking an image will start multiple instances of PhotoSwipe, but only if there are more than 1 images - just like you observed. The first iteration ist still fine.
A simple fix could be to call .off() before .on(), like:
...
$('.sc').each(function () {
$(this).off().on('click', function () {
options.index = $(this).data('id');
...
I am developing an iPad application with Phonegap and jQuery mobile. One of the functions required is to allow the user of the app to sign (their signature) in 2 boxes. I am using easel.js to handle the "drawing" on the canvas element.
The HTML structure of this page is something like:
<div class="signature-wrapper sw1">
<canvas class="flexBox" id="myCanvas" width="240" height="240"></canvas>
</div>
<div class="signature-wrapper sw2">
<canvas class="flexBox" id="myCanvas2" width="240" height="240"></canvas>
</div>
Where the 2 canvas elements are where the signatures will be drawn. Below each of these elements are buttons to clear and save each of the elements. When clicked, they fire functions to clear the canvas, or save the canvas to an image (the image is then placed over the canvas, and removed on clear)
The save functionality looks something like:
function saveStage1(){
var canvas = document.getElementById("myCanvas");
var imageData = canvas.toDataURL("image/png");
$('.sw1').append("<img src='" + imageData +"' style='position: absolute; left: 0px; top: 0px;' />");
}
Basically, it is just getting the content of the canvas and saving it to a PNG image, which is then appended to the wrapper for the canvas elements. There is additional code I have left out of the code here for clarity, dealing with localStorage and db.transactions.
This function is working as expected.
The next function is to clear the canvas:
function clearStage1(){
oldMidX, oldMidY, oldX, oldY = null;
delete window.currentShape;
stage.clear();
stage.removeAllChildren();
stage.update();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'images/signature-client.png';
$('.sw1 img').remove();
}
This clears the canvas, nulls some variables, and recreates the canvas.
This works 100% in chrome and safari, but does not work correctly on iPad as a Phonegap application. On iPad, you can draw, but once you have clicked save or clear you are unable to draw without navigating away and back to the screen. It seems there is a JavaScript error somewhere on the page on both the save and clear functions which is preventing any further JavaScript from executing without "reloading" the page.
I have setup my console in Safari on mac to look at xcode application, and there is no error in the log. Any help would be appreciated.
I have some images that are .png's with transparent backgrounds however, when they are added to the stage they have white backgrounds. Am i missing a trick here?
Each image is added like so:
var layer = new Kinetic.Layer();
var book = new Image();
book.onload=function () {
bookImg = new Kinetic.Image ({ x: 885, y: 780, offset: [85.5, 106], image:book, name:book, opacity: 0, /*scale:{x:0.5, y:0.5}*/ });
layer.add(bookImg);
stage.add(layer);
}
book.src = "images/book.png";
is it that the layer itself is what's creating the white background?
a little confused!
Cant it be that you have to set the background to transparent? Not only the picture itself but the image-object containing the image. Maybe the layer aswell.
You shouldn't need to set the opacity on a Kinetic.Image() object. If you want it to be invisible, either initially or after being placed, simply use hide() (and subsequently show() to re-show it). Or set visible to false in the parameters. The minimum needed to place an image on the stage looks like this:
var image = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 300,
height: 120
});
layer.add(image);
layer.draw();
This assumes your layer has already been added to a Kinetic.Stage() and the image has loaded ( imageObj.onload = function(){} ). Including a name is fine, the offset and opacity (and even scale) are valid key/value pairs for parameters but not really necessary when creating the image. These can always be set after the image has been added to the layer as well (using one of the many setters in the KineticJS library).
I'd try using a minimalist approach to see if the image shows up as intended first, then go from there.
I've got a column renderer defined that creates a HTML fragment which contains the ext.qtip attributes to create a quicktip. All works fine, the image renders in the grid cell, when i hover over the image a tooltip with the larger image is shown ... all nice but the quicktip on the bottom row expands beyond the constraints of the panel, is there any way to make it stay inside the panel boundaries?
var thumbRenderer = function(value, meta, record){
var thumbPath = Config.baseUrl + 'images/thumb/' + record.get('filename');
var previewPath = Config.baseUrl + 'images/big/' + record.get('filename');
return String.format('<img src="{0}" ext:qwidth="312" ext:qtip="<img style=\'margin: 2px 0;width:300px;\' src=\'{1}\' />" width="60" class="pic" />', thumbPath, previewPath);
}
You may want to look at the showAt method:
tip.showAt([x,y]);
Where x and y are the respective x and y co-ordinate positions.
EDIT: You can also use the showBy() method on a QuickTip instance:
http://dev.sencha.com/deploy/dev/docs/source/Tip.html#method-Ext.Tip-showBy