By default, adding a Stroke to a Shape in WPF / WinRT XAML creates an outline that is centered around the edges, meaning that half of the outline is outside the shape. But I need to create a shape with stroke und no fill that has the same silhouette as the shape with fill and no stroke. Is there an easy way to change the stroke so that the whole outline is inside?
I could create an OpacityMask that covers the inverted shape, but OpacityMasks are not supported in WinRT XAML. I could also create a smaller shape via inward polygon buffering (An algorithm for inflating/deflating (offsetting, buffering) polygons), but I was hoping for a simpler solution, e.g. a simple property to change the stroke to "inside".
I've really been trying to come up with an answer to this one. Over and over every attempt has some type of limitation. I'm afraid the answer is, you cannot do this - not with dynamic vectors at least. You can always create an image to simulate it. But that sucks.
Related
I know it is not possible to add eventhandlers to specific circles or rectangles in canvas. But there are some nice frameworks like EaselJS, KineticJS, Paper.js, Fabric.js that support the eventhandling on specific elements.
Can someone explain me how do they work?
I think there are only two solutions.
1. You create for each element a new canvas region and put them on each other. In this way you can give each region an event handler.
2. You have only one canvas region and one event handler. In this way you have to do complex mathematical calculations to find out if a specific element was clicked. If you have only circles or rectangles, this solution might be easy. But if you have path with lots of curves, this solution is quite difficult.
I don't want to use the libraries. So it would be nice, if someone can help me.
Here's a BRIEF summary of how canvas drawing libraries work
An unaltered canvas is just a big bitmap. Once you draw shapes on the canvas, they are unaccessible, forgotten pixels.
Canvas drawing libraries store all your shapes into “retained” objects. Each shape object has sufficient information about itself to allow the drawing library to redraw it whenever necessary.
The canvas drawing libraries are the "controllers" for objects. The libraries have the algorithms necessary to track, manipulate and redraw all shape objects as necessary.
The following information is retained about every shape object:
Basic identification
ID,
Shape name
Parent or Container
Inherent properties of the shape:
Rectangular shapes( rect, image, text) know width and height.
Circular shapes (circles, elipses, regular polygons, stars) know radius and sidecount.
Lines know length.
Curved shapes (arcs, beziers, paths) know anchor points and control points.
Text also knows…well, the text!
Images also know their pixel data (usually stored in javascript Image objects)
Transformational information:
Starting X/Y coordinate
Translations—accumulated movements off the starting coordinate.
Rotations—accumulated rotations of this shape (usually in radians).
Scalings—accumulated resizings
Other transforms (less common) are skews and warps
Layering information—the current z-index
Styling information:
StrokeColor,
StrokeWidth,
FillColor,
Opacity,
isVisible,
lineCaps,
cornerRadius
Tracking abilities:
Bounding box—the smallest rectangle that completely contains this shape
This is used for “hit testing” to see if the mouse is inside this object (for selecting and dragging)
If you don't want to use a library, you may find my answer in this thread helpful. As markE says once the canvas is written to there is no way of tracking that data (unless you care to loop through each individual pixel and test its colour; though that is only really useful for pixel level collision detection).
Is there any way to create a variable-width stroke on a drawn path? I need to imitate a pen pressure effect (without using a tablet). Can I do this by changing some properties of a stoke?
Thanks in advance
usually dont like just posting links! But this is what you need A Smooth and Responsive Drawing Application in AS3
It determines the thickness by the mouse speed, you can obviously change that to fit your needs
I have a basic paint application on a canvas, and I want to make a drawing-border and by that create a stencil. In other words, I want to make a shape, and then I want the user to be able to draw only inside it, even when he tries to draw outside.
Do you have any idea how can i do it?
thanks
This can be achieved by making a clipping region. The basic idea is that there is a path on the canvas that all drawing is constrained to.
Make the shape, and instead of calling stroke() or fill(), call clip()
If you don't quite get how clipping regions work, there are a few examples around.
I have a small project I am working on HTML5 canvas and I wanted to get some ideas how to accomplish it. I have built an outline of a tree using all the canvas line functions. lineTo, bezierCurveTo, quadracticCurve, etc. I have attached a picture of the outline. Now, what I would like to do is have some code that fills a percent of this outline. Kind of like a progress bar starting from the bottom. Does anyone have ideas on how to accomplish this?
Thanks
Rather than thinking of the problem as having to fill a percentage of the inside of the tree, why not split the image into two layers, the tree and the "fill", and then draw one over the other. See my image below for a quick and dirty example.
Of course, you will need to obscure the rest of the "fill" layer, so you will need to fill the outside of the tree shape white, but this should be fairly easy as you already have the path worked out. In essence, your path would instead of being the outside edge of a a tree shape, become the inside edge of a tree shaped hole!
Given an HTML canvas that has already been drawn to, what's the best way to shade the whole canvas except given circular regions? (in context: shadows except where are there light sources)
I was hoping it would be as simple as a rect() followed by subsequent arc()s, but AFAIK there's no way to "remove" those circular sections after the fact. I can get close ( http://jsfiddle.net/mW8D3/2/), but the overlapping regions of circles end up shaded (in XOR fashion, whereas I want OR). Using clip() has the same problem.
I've also tried using globalCompositeOperation but can't quite seem to achieve what I want.
Any ideas?
You could first create the shadow image on a second canvas and knock out holes from it with globalCompositeOperation 'copy' and a transparent fillStyle.
Like this: http://jsfiddle.net/mW8D3/4/