I was using kinetic-v4.0.0.js and my code run perfect. I now change to the new js since I cannot find the old one so as to download it, and I have many problems.
For example one of my problems is the applyfilter.
I have:
image.applyFilter({
filter: Kinetic.Filters.Grayscale,
callback: function() {
layer.draw();
}
});
and I get this:
Kinetic warning: Unable to apply filter. g is undefined
Does anyone know what would be the problem? Thanks in advance.
The syntax for applyFilter changed in KineticJS 4.1.0 (see the changelog)
Image.applyFilter() now takes in a required filter function, optional config object, and optional callback, rather than a config object that contained these three properties.
image.applyFilter(Kinetic.Filters.Grayscale, null, function() {
layer.draw();
});
You can also use the setFilter function:
image.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
Or set the filter through the images filter property:
var image = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.Grayscale,
filterRadius: 20
});
Related
I have a lottie animation that I have integrated it in my code. I want to show a specific frame on initial load and when the user hover it the animation should start from the beginning and completes it.
This is what I want to show in first load -
And this is the complete animation -
This is my code
let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
});
animationMenu.addEventListener('DOMReady',function(){
animationMenu.playSegments([1,200],true);
});
iconMenu.addEventListener('mouseover', (e) => {
animationMenu.play();
});
This is my fiddle
Can anyone please help me?
It looks like you're using an outdated version of Lottie in this fiddle. Once that's updated you probably want to pass through the initialSgments option instead of using playSegments. In this case you can remove your DOMReady code block entirely and it works as expected. The one issue with your animation is the circle by itself doesn't actually exist. There's a tiny dot of green on the only half frame where that circle is completed before the rest starts animating. 51.5 is the closest from you can get, here's a fiddle showing it
let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
initialSegment: [51.5, 200],
});
iconMenu.addEventListener('mouseover', (e) => {
animationMenu.play();
});
I have following code which is responsible to generate a text, But i don't understand how does CreateJs is encrypting this text
this.shape_12.graphics.f("#00ADEA").s().p("Ag1Q...");
where .p("") is responsible for the rendering of text "Nursing",
I am stucked here because i want to change this text to the "MyArticle". any help how can i do this.
(lib.text_1_5 = function (mode, startPosition, loop) {
this.initialize(mode, startPosition, loop, {});
// timeline functions:
this.frame_0 = function () {
this.link = "Nursing";
this.on("click", function (event) {
canvasStageRef.onItemClick();
});
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0));
// Layer 1//fontcolor
this.shape_10 = new cjs.Shape();
this.shape_10.graphics.f("#FF0000").s().p("AgsFJQgLAAgIgDQgIgDgFgGQgGgGgDgKQgCgJAAgMQAAgVAIgMQAIgNAPgCIAAAbQgEACgDAFQgEAEAAAKQAAALAGAGQAFAGALAAIALAAIAAgBQgFgEgEgHQgDgGAAgKQAAgLAFgLQAHgKAKgGQALgHAOAAQAPAAAMAGQAKAFAHAKQAGAKAAANQAAAKgEAHQgDAHgGAFIAAAAIAKAAIAAAagAgREHQgHAGAAALQAAAIADAGQAEAFAGADQAGACAGAAQAIAAAGgDQAGgCAFgGQADgFAAgIQAAgLgIgGQgGgGgOAAQgLAAgHAGgAg0DaIAAgbIA9AAQAIAAAFgFQAFgEABgJQgBgJgGgGQgHgGgLAAIg3AAIAAgbIBkAAIAAAbIgOAAIAAAAQAJAFADAIQAFAHAAALQAAAKgFAIQgFAIgJAFQgIAEgMAAgABABrIAAgbIAZAAIAAAbgAg0BrIAAgbIBkAAIAAAbgAgoA+QgIgFgDgKQgEgJgBgNQAAgXALgKQAJgMAQgBIAAAXQgIABgEAGQgFAGABAJQAAAJADAFQADAFAGAAQAEAAADgEIADgKIADgNIAFgQQADgIAEgFQAGgFALAAQALAAAIAFQAHAGADAHQAEAKAAALQAAAVgKALQgIALgQABIAAgYQAIgBAEgFQADgFAAgJQAAgIgDgFQgDgEgGgBQgEABgCADIgEALIgCAOQgCAIgDAJQgDAIgFAFQgFAGgNAAQgKAAgHgGgAAZgbIAAAAQABgOgHgIQgHgJgPAAIgxAAIAAgbIBkAAIAAAaIgRAAIAAABQAKAEAEAGQAFAGgBAJIAAAEIgBACgAg0hmIAAgbIALAAIAAAAQgGgFgEgHQgEgHgBgLQABgRAKgJQAJgJASAAIBCAAIAAAbIg+AAQgJAAgEAEQgGAEAAAJQABAJAGAGQAHAFAKAAIA5AAIAAAcgAg0jVIAAgcIBNgxIAIgFIAIgDIADgCIAAAAIgEAAIgKAAIgLAAIhHAAIAAgcICNAAIAAAdIhQAwIgJAEIgGAEIgDACIAAAAIAEAAIAHAAIALgBIBMAAIAAAdg");
this.shape_10.setTransform(-1.5, -9);
this.timeline.addTween(cjs.Tween.get({}).to({ state: [{ t: this.myText }] }).wait(1));
above code is responsible to render text Nursing(in .p("ahskjhsja");)... plz suggest which thing i will replace to make it text that is not render with path... it can change manually..
if this is possible with Text than how i can acheive plz help.. :(
This is not an encryption but path specification similar to path in SVG. You can define complex path by hand but when you need to draw a text data you should really try Text first.
Yes i got a solution with above answer .. and also giving exact right answer,, Thanks to #oleg and Lanny
this.shape= new cjs.Text("Cardic surgery", "bold 17px Arial", "#9aac5a");
this.shape.setTransform(25, -118, 1.0, 1.0, 90, 0, 0, -30, 1.0);
this.timeline.addTween(cjs.Tween.get({}).to({ state: [{ t: this.shape }] }).wait(1));
Does anyone knows how to combine RichMarker within angular-google-maps directive?
Best regards,
Chen
I created ng-map, because of some philosophical difference.
This is very easy with ng-map. It looks like this
var app = angular.module("myApp", ["ngMap"]);
app.controller("MyController", function($scope) {
$scope.$on('mapInitialized', function(evt, map) {
new RichMarker({
map: map, // !! $scope.map
position: new google.maps.LatLng(40.80, -74.13),
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: '<img src="http://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/>'
});
});
});
http://plnkr.co/edit/XOY25pFzd8OnzloPvACn?p=preview
For more about ngmap, visit http://ngmap.github.io
make rich marker library a angular module. and name the factory RichMarker
Create a directive and pass the element with information to show to this directive. Also pass RichMarker factory here. simply create the marker.
how can I display data point on bar in barchart?
I don't want to use datatip or tooltip which will highlight data points only when they are moused over.
I want to display the data point always on the bar.
is there any right way to get it?
thanks.
I want exactly like this
following is my code
<p:barChart id="barChartId" value="#{myBean.myModel}"
orientation="horizontal"
stacked="true" extender="ext" animate="true" shadow="false" />
<h:outputScript>
function ext() {
this.cfg.highlighter = {
useAxesFormatters: false,
tooltipAxes: 'x'
};
this.cfg.legend = {
show: true,
location: 'ne',
placement: 'outside'
};
this.cfg.seriesDefaults = {
pointLabels : { show: true },
};
}
</h:outputScript>
here, highlighter and legend are working fine but point labels are not displaying on bar
Not sure if it will work...
Use the extender of the <p:barChart , like this:
<p:barChart value="#{myBean.myModel}" widgetVar="myBarChart" extender="my_ext"/>
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
or this
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
Also take a look at the jqplot examples : Bar charts
Just in case someone doesn't crawl through the comments of the marked answer, as I didn't do in the first place.
The problem basically is not the configuration of the pointLabelselement, but rather that primefaces (as of 4.0) in its original state does not ship with the needed plugin of jqPlot included.
Therefore actually the solution is to make the needed plugin jqplot.pointLabels.min.js available. From a ticket in the bug tracker (http://code.google.com/p/primefaces/issues/detail?id=5378) I extracted, that primefaces uses jqPlot version 1.0.8.
download jqplot 1.0.8 from https://bitbucket.org/cleonello/jqplot/downloads/
add the plugin to your project (e.g. src/main/webapp/resources/jqplot-plugins)
add the plugin as script to your page (<h:outputScript library="jqplot-plugins" name="jqplot.pointLabels.min.js" />)
hi sorry completely new to mootools used to jquery, have a container (saved to variable itemContent) which reveals,
after this a function galleryScroll is call which scrolls the element to the container saved to var itemScroll,
want to make sure itemContent is revealed before scroll function is called whats the best way to do this?
thanks
itemContent.reveal({
'height' : '100%',
duration: 1600,
}).addClass('open-content');
// should this fire this in a callback function so it fires once the container is revealed
galleryScroll.toElement(itemScroll);
Fx.Reveal extends Fx and as such, inherits all of it's events.
try via the element setter:
itemCount.set('reveal', {
onComplete: function(){
galleryScroll.toElement(this.element);
}
}.reveal({... });
you can also get the reveal instance:
var fxReveal = itemCount.get('reveal');
this will return the instance and you can set whatever you like to it like usual.
You can enable chaining with the link option.
itemContent.reveal({
'height': '100%',
duration: 1600,
link: 'chain'
}).addClass('open-content');
This example will hide, reveal and then alert. Please note that I need to get the reveal instance as the standard Element in mootools does not implement the Chain class.
document.id('first').set('reveal', {
duration: 'long',
transition: 'bounce:out',
link: 'chain'
}).dissolve().reveal().get('reveal').chain(function(){alert('message');});
To see it in action: http://jsfiddle.net/LKSN8/1/