I was wondering if it would be possible to draw a line in raphael.js that will gradually increase its width.
It would start with stroke-width of for example 2px, and finish with stroke-width of 10px.
Does anybody know how to do that?
Yes, it's quite straightforward. Given a Raphael paper element paper and path string pathstr, just do this:
var linepath = paper.path( pathstr ).attr( { stroke: 'black', fill: 'none', 'stroke-width': 2.0 } ).animate( { 'stroke-width': 10.0 }, 5000 );
Unless I'm missing something in your request, it really is that easy.
Related
I have created a pretty good ChartJS system but am having trouble with breaking the extra x-axis labels and title font details. They same to want to be the same for some reason.
First of all, the solution I got help with is here:
SO answer
The charts look okay like so:
As you can see the title and addition x-axis label are both the same font size. This occurs due to the configuration options of:
// context.xAxes.font
context.font = this.config.get("chart.axis.font");
context.fontSize = 100;
context.fillStyle = this.config.get("chart.axis.font.color");
context.textAlign = 'center';
context.fillText(line, x, y);
I have the configuration options setup this way:
title: {
display: true,
fontSize: 10,
text: this.options.title,
padding: titlePadding,
},
I have no idea why the fillText is working for both title and extra categories.
As far as I know, there's no fontSize property on the canvas rendering context. You should use its font property instead to specify weight, size, and family of the font.
Please take a look at the runnable code snippet provided in this answer.
In the default openlayers draw interaction, there is no line segment which connects where your mouse is to the finish point (first image). When I set up a custom style, this segment is present which I don't want (second image). Does anyone know how I eliminate this final segment, like the default style does?
You'll need a style function that can style points, lines and polygons and distinguish by the geometry's type. Important: the polygon style should only have a fill, not a stroke. Because the boundary of the polygon is a separate linestring. A minimal working style function for the draw interaction would look like this:
var styles = {
Point: new ol.style.Style({
image: new ol.style.Circle()
}),
LineString: new ol.style.Style({
stroke: new ol.style.Stroke()
}),
Polygon: new ol.style.Style({
fill: new ol.style.Fill()
})
};
function styleFunction(feature) {
return styles[feature.getGeometry().getType();
}
I'm completely new at raphael and never have been especially good working with canvas elements. I found a useful piechart but need to tweak it a little more to fit my needs.
This is what I have now : http://jsfiddle.net/El4a/sbxjfafx/4/
And this is the figure I want to achieve
The white circle I'm trying to draw on top of the piechart, appears underneath it instead. I honestly have no idea how to fix this, although I'm sure the solution won't be that difficult.
I can achieve this figure using manual positioning (which is a crappy way) with the following code:
var paper = Raphael(10, 50, 500, 500);
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
But obviously this won't scale with the piechart, and is easily ruined by inconvenient things like changing the window size.
I have tried putting that code inside a function and create it the same way the piechart gets created.
Raphael.fn.circle = function(cx, cy, r){
var paper = this,
rad = Math.PI / 180,
chart = this.set();
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
return chart;
};
raphael("circle", 700, 700).circle(350, 350, 175, values, labels, "#fff");
But that leaves me with the result you can see in the fiddle.
Hope anyone can help!
Thanks in advance.
Make sure you don't create the canvas twice. So create it once, and then use that reference to create the new elements.
Also place the circle after the coloured one, so that it appears in front. This is all about the order of elements in the DOM.
eg jsfiddle
Relevant amended code.
var r = raphael("holder", 700, 700);
r.pieChart(350, 350, 200, values, labels, "#fff");
r.circle(350, 350, 175).attr({ fill: 'white' });
I am having two problems with KOgrid.
1) I could not get scroll bars in the kogrid .It is very difficult to do data entry without scroll bars.
2) I also could not get kogrid to working wihout specifying hard coded height and width.In my application I can not have a fixed height and width.
Did anybody else had the same issue ?
I tried a workaround suggestion from this thread ( using jQuery fix as last line in my viewmodel).
KO Grid Display Isseues, On resize Gird shows one row. Images also included
that just increased that size of the grid but it did not display any data . However, when I resize the page data shows up.
Below are my HTML and kogrid options ( I tried with and without paging options, Ideally I do not want to use paging )
<div data-bind="koGrid: gridOptions"
style="height: 800px; background-color: none;width: 1850px;">
</div>
self.gridOptions = {
data: self.mydatarray,
footerVisible: true,
displaySelectionCheckbox: true,
afterSelectionChange: self.RowSelectionChange,
rowHeight: 50,
selectWithCheckboxOnly: true,
enableSorting: false,
multiSelect: true,
selectedItems: self.SelectedRows,
enableColumnResize: true,
showFilter: false,
canSelectRows: true,
enablePaging: true,
pagingOptions: {
currentPage: ko.observable(1),
pageSize: ko.observable(3),
pageSizes: ko.observableArray([3, 6, 9])
},
rowTemplate: errrowtmpl,
columnDefs: [
{ field: 'Customer', displayName: 'Customer', cellTemplate: Customersddedittmpl, headerCellTemplate: headercelltmpl },
...
...
{ field: 'GenNotes', displayName: 'GenNotes', cellTemplate: simpleedittmpl, headerCellTemplate: headercelltmpl }
]
}
Please let me know if you need any more information
Thanks
Kenner Dev
I found a solution to the problems I am facing.
1) I used Jquery to add scroll bar. I added code line below as last line of my data loading function. I am not sure id this breaks any other KOGrid functionality.In my application I did some basic testing and it seems to be working fine.
$("div.kgViewport").css("overflow", "scroll");
2) I still dont know how to solve this problem 100%. It still does not work unless fixed width and height are mentioned in style. In my app I used vw and vh as opposed fixed width and height to solve the problem of making it work on all screen sizes.
<div data-bind="koGrid: gridOptions"
style="height: 73vh;overflow:scroll;width: 96vw;"></div>
I want to implement a isometric view. see the image. How to set CCLayer CCCamera property can do this?
Rotate and Scale can not to do this, because rotate and scale at same time.
Obviously this is far too late for you to use, but for anyone looking at this by googling "cocos2d isometric transformation rotate skew" or something like that like I was: I figured out the right skews and rotations. A two-layer approach was needed due to the lack of a diagonal scale or Z rotation. For javascript devs: this makes an isometrically transformed DrawNode. I'm not sure what performance impact this has, but since it's only using the native functions I don't believe it has much if any. For other languages, it should be trivial to port.
var MapContainer = cc.Layer.extend({
ctor: function(){
this._super();
this.scaleX = .947;
this.setAnchorPoint({x:0, y:0});
this.drawNode = new MapDrawNode();
this.addChild(this.drawNode);
return true;
},
drawNode: null
});
var MapDrawNode = cc.DrawNode.extend({
ctor: function(){
this._super();
this.setAnchorPoint({x:0, y:0});
this.y = 360; // shifts everything up, adjust as needed. Mine is 1/2 window size
this.transform();
// Your init code here
return true;
},
transform: function(){
this.setScaleX(0.81649658);
this.setScaleY(0.81649658);
this.setSkewX(16.3);
this.setSkewY(16.3);
this.setRotationY(45);
this.setRotationX(45);
}
});
Proof: check the image at the url since I don't have 10 rep to post it inline. http://i.stack.imgur.com/T3uU8.png