I've been asked to build something similar to this so that customers can draw basics shapes of kitchen tops. Similar to that in the image below but also have dimensions.
It looks like konva has support for basic shapes like rectangle and circle etc and it also includes a transformer which allows for resizing. However, I think if I want to build a custom shape like the one in green and have individual sizing i.e. resize each individual line. I am going to have to build something myself.
I was hoping someone could point me in the right direction. I have seen an example where someone has used a "line" class which takes a series of points and then sets the attribute to closed which fills in the shape. Obviously I would need to extend this to allow the custom resizing. However, Im not sure this is the correct path to head down?
Any suggestions?
.
How about using rectangles and having an option to snap them together. It should be fairly simple to do the edge detection and snapping. Then show the result as a Konva.Line around the perimeter.
Then you can show all the control handles for the rectangles except those on the sides where another Rect has joined.
Related
Out of the box we get LinearGradient, RadialGradient and SweepGradient. What I would like to do is something similar to the shown image below. Let's say we draw a custom shape with CustomPainter. When this customShapeGradient is applied on it, the gradient should start from the border of the custom shape and go towards the center. I realize that this might introduce wierd effects since our shape will mostly be not symmetric and a "border to center" approach is not as easy as a "center to border" approach(like the 3 out of the box methods). Here it will be the developer's responsibility to make sure the gradient fill do not overlap with itself, meaning it won't go all the way to the center.
Here is an image I found for an Elliptic shape which most closely describe what I want. Let's say our shape is the line with the yellow color. And I want to achieve the gradient which fills inside.
This is a similar image too:
The two examples I have provided are for ellipses however my question is for any type of shape that is created by a CustomPainter.
I am almost sure this is possible since a shadow(gradient in nature) is basically the inverse of this. We can apply a shadow to a CustomPainter shape. The only difference will be that the shadow will grow towards inside of the shape(maybe like a inner shadow).
I am trying to render cylinders for a CAD-like project. As multiple of these will be nested in each other, I am looking to display them similar to this: http://mrwadeturner.pbworks.com/f/1305815353/FC_Cylinder_41702_lg.gif
i.e. I want the outline and the base and bottom circles traced out and the rest should be (semi-)transparent.
Note that this is different from using regular wireframe settings, because that will trace out every face of the sides of the cylinder. The other approach I found - rendering the object twice, once in color and slightly enlarged and once it "regular" version on top - unfortunately won't work either, since multiple cylinders will be nested.
I think this should be possible with custom vertex and fragment shaders, but I am not very proficient in using them. What would be the best way of achieving this effect?
Thanks a lot!
Sound like you just need to apply various textures to the same faces. Next you want to try to create custom texture that is going to be a simple transparent .png image with solid dashed border. Then you'll have to set side:THREE.FrontSide and side:THREE.BackSide to your textures and play around with depthTest.
Another approach is to use lines that you age going to create vertex-by-vertex. See this example for custom line implementation: Hilbert curve and Shapes generation
Hope that helps!
I'm working on a simple drawing application. My line is constructed using polygons and things look good so far. I would like to add a transparency feature and I used glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); for that reason. However, because my polys sometimes overlap, I get the ugly result shown in the picture (multiple layers of transparency). What I would like to get is the figure in the left(no overlapping because there is no transparency), with an overall transparency.
I guess I could do this by keeping the polys from overlaping, but that would be a overkill for this task I think. There should be a way to control them at drawing time, but being a beginner with OpenGL doesn't help.
I'm sorry, but the way transparency works does not allow you to do what you want without manually keeping the polygons from overlapping. The way that transparency works is that it takes the colour of the surface below it, and uses the blending function you specify in order to calculate the final colour of the pixel.
In your program you are drawing multiple polygons with alpha on top of each other. That means that their colours add up, giving the result you see.
I've never actually written a drawing application, but you could perhaps take a look at triangle strips to draw your lines. They allow you to extend the line point by point, and make sure the geometry won't overlap with itself.
I am making a GUI in OpenGL (more specifically lwjgl). I have tried hard to research different ways of doing this but I am having a hard time finding exactly what I want. I do not want to use any external libraries (only ones built in OpenGL, even trying to stay away from using GLUT) and I would like to have it work on anything that supports OpenGL (ex. Frame Buffer Objects don't work on older graphic cards).
I am making a 3D GUI with a scrollable panel as a component. The problem is I don't know how to draw a partial GUI component without doing a lot of calculations to only render part of it. I am making the components out of OpenGL primitives, not textures. I was hoping there is an easy way to do this like use multiple viewports. I don't really even understand what viewports are.
In short: I need to have a scrollable panel as a component overlapping other GUI components (since it will be a drop down menu) and not let any of the components in my panel draw outside my panel.
If you just want to prevent drawing pixels that are outside of a rectangular region (and I think that's what you're asking), than glScissor is exactly what you're looking for.
In lwjgl, you can find the function in org.lwjgl.opengl.GL11.
If you want to scroll a larger scene within a fixed region on the screen, the most straightforward way to go is by just modifying your projection matrix for the scroll position and redrawing the scene. If you are using gluPerspective to set up your projection matrix you'll have to convert it to a direct call to glFrustum; if you're using glOrtho it's much more straightforward.
Keep in mind that "scrolling" a perspective view has no one right way to do things - it depends on what sort of effect you want to achieve, and what particular sort of distortion you want near the edges of the overall viewport.
I have 3 nice and puffy clouds I made in Photoshop, all the same size, now I would like to animate them so they appear like they were moving in the background. I want this animation to be the base background in all my scenes (menu,settings, score, game).
I'm using cocos2d, I have setup the menus and the buttons so the work but how do I accomplish this?
I was thinking to add this as a layer, any other suggestions?
Can anyone show me how some code how to make this please?
David H
A simple way to do it is with sine and cosine. Have slighly different parameters (period and amplitude) to ensure that the user doesn't realise (as easily) that they are programmatically animated.
You may also want to play with animating the opacity value. I'm not sure if layers have those, otherwise you'll have to add the clouds to separate nodes or images and applying it to them.
It's hard to be more specific without knowing what the images look like.
The simplest way to animate anything is to add the sprite to the scene, set the position and call something like...
[myClouds runAction:[CCMoveBy actionWithDuration:10 position:CGPointMake(200, 0)]];
This will slide the sprite 200px to the right over 10 seconds. As Srekel suggested, you can play around with some trig functions to get a more natural feel and motion paths, but you'll have to schedule a selector and iteratively reposition the elements.
The more difficult part of your questions is about getting the animation in the background of all scenes. Keep in mind that when you switch scenes, you're unloading one node hierarchy and loading a new one. The background cannot be shared. You CAN, however, duplicate the sprites and animation in all scenes, but when you transition between them there will be a jump.