I'm new to SVG.js and to a concept in general, though I have a vector graphic background. So what I'm looking for is the understanding of the concept.
Duplicating, have found only the Array copy function, how to duplicate an object?
As an example:
element.rotate(45, 50, 50)
This rotates the element what if I want to keep a copy intact?
The Array itself. What is it? Doesn't looks like an Array in a graphic design program. What if I want simply to have a three raw array with five column of elements?
Merging. If I have an arc and line could I merge them to a path? Then rotate around an endpoint their copy and merge again to have the nice corners?
Maybe I ask too much but as a newcomer, I need some push forward.
The clone() method is your friend if you want to copy shapes.
You can read through the docs at svgjs.com to learn more.
For merging: No, that is not possible with svg.js albeit not impossible in general.
Its just that nobody requested this feature until now or nobody had the time to put their brain capacity into it to solve it.
There is a chance, that it gets considered, when you open a new issue and request that feature.
There is one problem with your idea though
// a line
canvas.line(0, 0, 200, 0)
<line x1="0" y1="0" x2="200", y2="0">
// an arc
canvas.path('M 200 0 A 100 100 0 0 200 200')
<path d="M 200 0 A 100 100 0 0 200 200">
// resulting path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200')
<path d="M0 0 200 0 A 100 100 0 0 200 200">
// rotating the path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200').rotate(90, 200, 200)
<path d="M0 0 200 0 A 100 100 0 0 200 200" transform="matrix(....)">
As you can see, rotating your path does not change the values of the d-attr. Rotation is a transformation which is done with the transform attribut. So you cannot easily merge these 2 paths together. Instead you first have to get rid of the transformation and apply it to every point directly. Then you can merge.
This ofc is again possible but maybe not something someone implemented already.
It would make a cool plugin, though...
Answering my own question if someone one day needed this.
First of all the SVG.js and its kinds do not work with geometry they work with SVG. Learn SVG first than decide whether do you need them or not. In my case, Vue will do work simpler.
As for others:
Duplicating - all that the SVG provides in my case mostly <use>, but be careful with styles they are unchangeable.
Arrays - no such thing not as in a CG graphics editor, you should program them yourself. As I sad SVG.js only help you with SVG not with geometry
Merging - theoretically possible but there is no out of the box solution.
Related
I'd like to implement an algorithm capable of comparing two images using the C api of OpenCV 3.0.0 .
The image are captured by webcam so they have the same resolution (don't worry is small) and the same file format (jpeg) (but we can change it if we want)
My idea is to get two image, transform in b&w and with a simple for construct compare bit by bit.
In b&w we can consider the image as a full matrix with 0s and 1s.
Example :
Image1 (black and white)
0 0 0 1
0 1 0 1
0 0 0 0
0 0 1 1
So i know there's a lot of way to do it with opencv but i read a lot of example that are useless for me.
So my idea is to manually operate with every pixel. Considering the image as a matrix we can compare pixel by pixel with a simple double construct for (pixel_image[r:rows][c:columns] == pixel_image2[r:rows][c:columns] only if the "pixel" is considered as integer. So the problem is how can i access to the value of pixel from IplImage type?
Certainly in this way i think i have a bad optimization of code, or maybe i can't adapt it to a large scale of image data.
(Please don't answer me with: "use c++ - use python - c is deprecated ecc..", i know there're so many way to do it in easy way with an high level code)
Thanks to all.
Ok i solved.
This way u can access the value of single pixel (if the image is loaded as RGB)( rememeber that opencv see BGR)
IplImage* img=cvCreateImage(cvSize(640,480),IPL_DEPTH_32F,3);
double tmpb,tmpg,bmpr;
for(int i=0;i<img->height;i++){
for(int j=0;j<img->width;j++){
tmpb=cvGet2D(img,i,j).val[0];
tmpg=cvGet2D(img,i,j).val[1];
tmpr=cvGet2D(img,i,j).val[2];
}
}
If the image is a single channel (for example if we convert it to black and white) is
IplImage* img=cvCreateImage(cvSize(640,480),IPL_DEPTH_32F,3);
int tmp
for(int i=0;i<img->height;i++){
for(int j=0;j<img->width;j++){
tmp=cvGet2D(img,i,j).val[0];
printf("Value: %d",tmp);
}
}
I have a rather complex example I wanted to try and get working, perhaps someone better at maths than me has a better approach. Code so far: https://gist.github.com/kyle-ssg/697570a7d5edc0e14cc6967b2e40b7ba.
I have a container component that scales from 1 to 4 and a child component I wish to keep in the exact same position throughout (i.e. appear not to also scale) so that I can mask it using overflow:hidden.
My approach was to essentially negate the scale and translate the x and y appropriately as the scale of the parent increases. I thought that my approach was working as I could adjust the animated value from 0 to 1 along with any widths/heights and positions and the start and finish was exactly what I expected
https://ibb.co/TTCkN8M (start) https://ibb.co/KwKfW4F (finish)
However, when animating the value between 0 and 1 it seems to start and end correctly but not animate appropriately inbetween (i.e. the red square staying in place). http://g.recordit.co/HPEkMyvVOf.gif
In the end I didn't need this, using react-native-masked-view achieved what I wanted.
I'm creating my own checkbox style. I have found the code on the internet I like and I'm not so confident in WPF drawing. I need to make these corners rounded. How to make these corners soft?
<Path Name="InnerPath"
Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75"
Stretch="Fill"
Stroke="#808080" />
At first the path markups can seem pretty confusing. The main markups you need to be concerned with regarding your question is M,Q,L, and Z.
M is the starting point for a new path. As your image contains 2 elements (paths), you will be using 2 M markups - One for the check mark, the other for the box.
Q designates a Quadratic bezier curve. It needs two points. The first determines where to pull the line to and the second is it's end point. It is important to note that the previous set point marks the beginning of the curve.
L is for a straight line. This is critical after the bezier curve otherwise it will throw an error. Evidently the parser sees the Q, handles the first two set of numbers, then sees a third that isn't tied to a markup and BOOM. In your case, the L is used since we are making a line. We could, however, use another Q to make a wavy line.
Z will close a path and connect it to the starting point.
Looking at your original image, The only markups needed are M and Z. Your path data property value would be:
M 263,99 263,115 87,115 87,340 311,340 311,221
327,221 327,355 73,355 73,99 Z
M 186,323 105,238 143,195 186,240,351,68 391,112 Z
Hopefully this image will help explain the above numbers:
Outline Image
The only addition would be to add a FILL property to the Path and use the same value as your stroke (#808080). This gives you the same image as your original. Don't be concerned that these are large numbers. As vector based graphics they will scale down to fit their container!
(For those curious about how I came up with these numbers, I took the above image into photoshop, expanded the canvas to make is square, then simply noted each points X,Y in photoshop and used those numbers.)
Regarding the curves...
This is where the Q markup comes in as well as the L. Hopefully the following illustrations will help. Here we have a simple 90 degree angle:
RightAngle
To throw a curve into this, we need to use the Q markup. If you want to make a perfect curve, you would use the point where the 2 lines would intersect. As this is a 90 degree angle, that is pretty easy to figure out. That will be the point the curve is pulled to. In our example above, this would be point 0,0. We next need to know where we want the curve to start and end.The further from the anchor point, the bigger the curve. In the following illustration I used 50:
CurvedAngle
In plain language M 100,0 50,0 Q 0,0 0,50 L 0,100 translates to:
Staring at point 100,0, draw to point 50,0, from there begin a curve being pulled to point 0,0 and ending at point 0,50. Now draw a line to 0,100.
Hopefully this explains how to make curves in a path. It's actually pretty easy once you get the hang of it. With a little creativity, you really can do a lot with paths.
With the above in mind, the markup I think you are looking for is (DON'T FORGET TO ADD THE FILL PROPERTY!):
Data="M 263,99 263,115 113,115 Q 87,115 87,139 L 87,315
Q 87,340 113,340 L 287,340 Q 311,340 311,315 L 311,221
327,221 327,315 Q 327,355 287,355 L 113,355 Q 73,355
73,315 L 73,139 Q 73,99 113,99
Z M 186,323 105,238 143,195 186,240,351,68 391,112 Z"
The above markup gives you:
CurvedCheckBox
Here's a link to the markup commands:
MarkupCommands
Here are some examples of making shapes:
MakingShapes
For me was helpful to set StrokeLineJoin of Path to Round
I'm trying to find all the paths between 2 nodes in a grid, and the path has to go through all the node from start to end.
Example (Start = S, End = E)
0 0 0
0 S 0
0 0 E
The answer for the above is 2 paths: (ignore the '.''s)
0-0-0
|.......|
0 S-0
|
0-0-E
0-0-0
|......|
0 S 0
|...|...|
0-0 E
I thought of using recursing, but gave that up due to the high overhead of each call...and decided to go with an iterative approach using a stack. (kind of like recursing but not...fixed memory overhead).
The solution works great for grids of size (4x7), but tried it on an 8x8 grid...and it didn't finish in 4 hours...which sort of makes sense since the total number of possibilities is around 3**62 (approx), as each node that is not on the edge has 3 possible ways of traversal...and hence that solution fails.
I thought of splitting the 8x8 grid into 2, using a vertical and horizontal split...but this would lead to finding less than ideal paths.
Is there something that I'm missing????
Can something be done to make it go faster?
I will post the solution that I have tomorrow (done in C).
Have a look at the shortest paths problem it should get you started on this. The Bellmann-Ford or Dijkstra's algorithm are worth trying. You might be able to improve on the efficiency of those if your grid has some properties you can exploit.
Nope, you do not miss anything and nothing can be done faster.
This is the Longest Path Problem which is NP-Hard.
Well, there is a linear-time algorithm for finding a longest path between any two given vertices in a rectangular grid graph, which seems to be exactly what you're looking for.
I'm trying to use SVG (really XAML) to define a path which looks like a downwards pointing arrow.
|
|
\ | /
\ | /
\ /
`
It is super-important that the edge of the arrow is sharp. I have tried with various combinations of M, L and z with no success.
You should take a look at the Marker element:
painting_Markers
I don't know about SVG but this will produce a sharp edge in XAML (tested in XAML Crancher)
<Path Data="M 10 0 L 10 20 0 10 0 15 12.5 27.5 25 15 25 10 15 20 15 0 z" Stroke="Black"/>
Have a look at this example from the SVG spec. You may want to tweak the 'stroke-miterlimit' property depending on the sharpness of the corner.
I'd recommend to use something like inkscape and design the arrow (just draw a line, select it, go to object > filling / contour > pattern and contourline > endmarker)
then save as pdf, rename the *.pdf to *.ai, open blend and import the ai file as adobe illustrator.
It's a bit difficult, but I still prefer it over using blend.
(i translated from german, so some menu items might be slightly different)
After having done some research, I don't think such a thing is possible to do with a single path easily. I did manage to solve it all by finding a library of XAML arrows and then doing some trickery to rotate the arrow I wanted the way I wanted it.
I agree with the above answer.
You (and your readers) should note the advent of Raphael (If they have not already) and also my offering for the SVG world.
I have been working for a year with Raphael and SVG. This link to my homepage might interest you (To those who are still listening and/or switched on to the power of Inkscape/Cross Browser SVG)
http://www.irunmywebsite.com/
This home page is a hybrid of the W3C SVG recommendations and the javascript library and beneath it are all the resources to get up and running quickly with SVG and Raphael.
Regards Chasbeen.