I'm trying to create a custom pattern fill for highcharts.
It's a horizontal dashed line with alternating starting points from one row to another (the first start at 0,0 the second at 3,10 and so on).
I edited the Highcharts JSfiddle example replacing the custom pattern with the following (here you can find my "final" version) :
color: {
pattern: {
path: {
d: 'M 0 0 H 8 M 14 0 H 22 M 3 10 H 19',
strokeWidth: 0.5
},
width: 22,
height: 20
}
}
The problem is the the two rows of lines have different width.
I can't find any parameter in the documentation to fix this.
I don't know if the problem is in my pattern definition or a highcharts bug.
Any thoughts?
The path as-is moves first to 0,0 and then 14,0, and finally 3,10:
d: 'M 0 0 H 8 M 14 0 H 22 M 3 10 H 19'
You can change that to 0,1 and then 14,1, and then 3,11 and the lines are the same width:
d: 'M 0 1 H 8 M 14 1 H 22 M 3 11 H 19'
The lines starting at 0,0 are centred on the boundary meaning that half the line gets cut off, so just moving them all down by 1 ensures that the whole line is visible.
Updated Fiddle
Related
I am trying to read image from the text.
I am getting better result if I break the images into small chunks but the problem is when i try to split the image it is cutting/slicing my characters.
code I am using :
from __future__ import division
import math
import os
from PIL import Image
def long_slice(image_path, out_name, outdir, slice_size):
"""slice an image into parts slice_size tall"""
img = Image.open(image_path)
width, height = img.size
upper = 0
left = 0
slices = int(math.ceil(height/slice_size))
count = 1
for slice in range(slices):
#if we are at the end, set the lower bound to be the bottom of the image
if count == slices:
lower = height
else:
lower = int(count * slice_size)
#set the bounding box! The important bit
bbox = (left, upper, width, lower)
working_slice = img.crop(bbox)
upper += slice_size
#save the slice
working_slice.save(os.path.join(outdir, "slice_" + out_name + "_" + str(count)+".png"))
count +=1
if __name__ == '__main__':
#slice_size is the max height of the slices in pixels
long_slice("/python_project/screenshot.png","longcat", os.getcwd(), 100)
Sample Image : The image i want to process
Expected/What i am trying to do :
I want to split every line as separate image without cutting the character
Line 1:
Line 2:
Current result:Characters in the image are cropped
I dont want to cut the image based on pixels since each document will have separate spacing and line width
Thanks
Jk
Here is a solution that finds the brightest rows in the image (i.e., the rows without text) and then splits the image on those rows. So far I have just marked the sections, and am leaving the actual cropping up to you.
The algorithm is as follows:
Find the sum of the luminance (I am just using the red channel) of every pixel in each row
Find the rows with sums that are at least 0.999 (which is the threshold I am using) as bright as the brightest row
Mark those rows
Here is the code that will return a list of these rows:
def find_lightest_rows(img, threshold):
line_luminances = [0] * img.height
for y in range(img.height):
for x in range(img.width):
line_luminances[y] += img.getpixel((x, y))[0]
line_luminances = [x for x in enumerate(line_luminances)]
line_luminances.sort(key=lambda x: -x[1])
lightest_row_luminance = line_luminances[0][1]
lightest_rows = []
for row, lum in line_luminances:
if(lum > lightest_row_luminance * threshold):
lightest_rows.add(row)
return lightest_rows
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 ... ]
After colouring these rows red, we have this image:
I am looking for a simple conversion/transformation formula, such that:
In a square region sized d*d, containing a circle with diameter d (tangent to the 4 sides of the square),
all points on the circle are equidistantly transformed/unfolded/remapped into a straight line along the top or bottom edge of the square,
the center point of the circle is transformed/stretched all along the opposite edge of the square,
all points inside the circle are transformed the same way, and the resulting left and right sides can be tiled seamlessly, and
all points outside the circle are out of range of the square after the transformation, and are not visible.
In this before and after example, d=1:
Before After
------ -----
0 , 0 --> 0 , 1 (the only infinitely stretched point)
0 , -1 --> 0 , -1 (the only unchanged point)
0 , 1 --> -1 , -1 and 1 , -1
1 , 0 --> 1/2 , -1
-1 , 0 --> -1/2 , -1
√(1/2) , √(1/2) --> 3/4 , -1
√(1/2) , -√(1/2) --> 1/4 , -1
-√(1/2) , √(1/2) --> -3/4 , -1
-√(1/2) , -√(1/2) --> -1/4 , -1
1 , 1 --> out of range
1 , -1 --> out of range
-1 , 1 --> out of range
-1 , -1 --> out of range
This is related to polar/Cartesian (r,theta) to (x,y) conversion and/or arctan. The formula would be usable on graphing calculators like desmos.
For visual thinkers, here is a before & after graph of the transformation. Note that the circle before is along the bottom after, and that the transformed dots can be tiled horizontally.
I have this data:
data2 is missing the third point. So I thought, I'd define two different x columns and assign data2 to x2.
Problem: the third point of data1 goes up to 3 in the compiled graphic. If I have different and more values, points start to go anywhere, but not where they belong.
That is the code I've used:
\addplot[only marks, mark = diamond, color = orange, mark size = 3pt]
table[x=x1, y=data1]{example.dat};
\addlegendentry{data1};
\addplot[only marks, mark = square, color = gray, mark size = 3pt]
table[x=x2, y=data2]{example.dat};
\addlegendentry{data2};
\addplot[only marks, mark = o, color = blue, mark size = 3pt]
table[x=x1, y=data3]{example.dat};
\addlegendentry{data3};
And this is the graph I get:
Thanks a lot!
Btw. in the real data one data set is missing a x/y value in the middle of the data. I hope that doesn't matter compared to my example.
pgfplots is interpreting 2 tabs as a single separator. Thus, it sees the data file as:
x1 x2 data1 data2 data3
0 0 1 2 3
1 1 1 2 3
2 1 3
Solution 1. You can replace empty cells with NaN. pgfplots will interpret this correctly:
x1 x2 data1 data2 data3
0 0 1 2 3
1 1 1 2 3
2 nan 1 nan 3
Solution 2. Use another type of separator (e.g., semicolons or commas):
\begin{filecontents*}{example.csv}
x1;x2;data1;data2;data3
0;0;1;2;3
1;1;1;2;3
2;;1;;3
\end{filecontents*}
\pgfplotstableread[col sep = semicolon]{example.csv}\mydata
\begin{document}
...
Here I've included the data file in the TeX file, but it should also work with a separate data file.
I have following postscript code
1448 2069 /moveto
(Comparator) {show newpath}
I would like to draw a rectangle around the text(Comparator) as I need to provide a hyperlink to redirect it to abbreviation page.But I am struggling to find the rest of the 2 coordinates. Would some one please advise.
Your friends are
string bool charpath
pathbbox llx lly urx ury
from the Postscript language.
so do
1448 2069 moveto
(Comparator) false charpath pathbbox newpath
will give you left-x, lower-y, right-x and upper-y on the stack. You can subtract/add some constant values to give a little space around the text and then calculate width and height instead of the right/upper values and do a rectstroke
EDIT small working sample
%!PS
/Helvetica findfont 20 scalefont setfont
20 dup moveto (Link on page1) show newpath
[ /Rect [ 20 dup moveto (Link on page1) false charpath pathbbox
2 add 4 1 roll 2 add 4 1 roll 2 sub 4 1 roll 2 sub 4 1 roll
newpath ] /Page 2 /Color [.7 0 0] /Subtype /Link /ANN pdfmark
showpage
20 dup moveto (Target on page2) show
showpage
The line 2 add 4 1 roll ... adds 2 more margin at each side. You can omit the entire line.
I was having a little trouble trying to use AStar + Phaser. I debugged it a bit and discovered a little bug. The X and Y of the astarNode property are wrong. I'm still trying to fix it, but you guys maybe help me to find the problem faster.
Code:
preload: function() {
this.game.load.tilemap('map', 'assets/tilemap.json', null, Phaser.Tilemap.TILED_JSON);
this.game.load.image('RPGPackSheet', 'assets/sprites/RPGPackSheet.png');
},
create: function() {
this.map = this.game.add.tilemap('map');
this.map.addTilesetImage('RPGPackSheet');
this.layer = this.map.createLayer('LayerName');
this.astar = this.game.plugins.add(Phaser.Plugin.AStar);
this.astar.setAStarMap(this.map, 'LayerName', 'RPGPackSheet');
console.log(this.map.layers[0].data[4][6].properties.astarNode);
},
tilemap.json
The output on the console should be:
f: 0,
g: 0,
h: 0,
walkable: false,
x: 4, // equals to the second index of layers[0].data
y: 6 // equals to the first index of layers[0].data
But is giving me:
f: 0,
g: 0,
h: 0,
walkable: false,
x: 24,
y: 13
UPDATE: I found out something more. My tilemap.json uses only 2 tiles (42 and 52). So when the setAStarMap() is called, he updates the X and Y of every astarNode with the current x and y that it is on the for loop (to understand better check updateMap() of AStarPlugin). In the end, every astarNode that uses 42 will have x set to 24 and y set to 13 (which is the coordinates of the last astarNode using tile 42), and every astarNode that uses 52 will have x set to 13 and y set to 12 (again, coordinates of the last astarNode using tile 52). I just can't figure out why this is happening...
From what I know, world size in tiles of your map is supposed to be in a square size, so from what I see your world size in tiles is 25x14. So you can add a blank tiles to fill up your world map in order to get it to size 25x25