Nokia HERE Maps: Letting user draw rectangle on map - drawing

using Nokia HERE maps api:
There is a useful post about how to let user draw a polygon, but I need to restrict that to rectangle.
Can anyone suggest a way of letting user draw a rectangle please?
Any help is much appreciated.

This is just an extension of creating a draggable marker. You will need to add two markers to the map (say startHandle and endHandle and place them in an H.map.group called rectHandles). Add a 'drag' handler to the group so that whenever one of them is moved, the associated rectangle to display is calculated and updated.
rectHandles.addEventListener('drag', function () {
var rect = H.geo.Rect.coverPoints([startHandle.getPosition(),
endHandle.getPosition()]);
rectangle.setBounds(rect);
});
Where rectangle is just an instance of H.map.Rect

Related

Displaying a rectangle with a border using Cosos2d Js

I am new to Cocos 2d js.....
I want to know how can I draw a rectangle having a border to it using cocos2d js??..
I tried to google but didn't find any sample code or something similar..
which is quite simple to do using HTML and CSS...
Thanks.
Yo need to add a draw node to your scene/layer and draw a rectangle on it. For example, say you have the following method within your layer:
{
...
var dn = new cc.DrawNode();
this.addChild(dn);
dn.drawRect(cc.p(50,50), cc.p(200,300), cc.color(255,0,0,255), 3, cc.color(0,255,0,255));
...
}
The function call parameters are: drawRect(origin, destination, fillColor, lineWidth, lineColor).
This is from the samples found in the samples/js-tests folder that should be in your cocos2d-js folder. For more information, check out the API on the drawing nodes here: http://www.cocos2d-x.org/reference/html5-js/V3.3/symbols/cc.DrawNode.html
PS: if you want to draw a filled circle with a line color, however, note that there's not a function for that currently. There are a few workarounds, the best one I've found is to use a drawDot for the "inner solid part" of the circle, and a drawCircle for the outer part.

Can I connect rectangle to C++ model?

I have connected QML's ListView to my C++ model and it updates when model changes which is cool. However I don't want to display my data in ListView bur rather in custom way in rectangle (ideally a plain view which doesn't exist).
How could I do this?
The issue I see obviously is rectangle is not a view and there is other plain view which allows custom drawing. Is there way around it?
Addon
Following up on the answer and comment, let me give context why I am doing it. I have various information and if I use list, I will have to use multiple lists on one screen which doesn't look good. What I want to implement is what I would call 'document view'. Header goes here, title goes there, data here and footer here. It is a custom presentation of my model's data.
#Folibis, I like your first point. It seems like if do something like:
Rectangle
{
Text { text: mySingleton.getFruitName() }
Text { text: mySingleton.getFruitPrice() }
}
Note I have intentionally not included anchors or geometry to keep focus on my question but assume price appears next to fruit name.
Does this mean if I update fruit name or price of the exact same object in model else where in GUI, the above will be updated automatically?
You have several ways to implement custom drawing. I can't really imagine what data can be supplied to Rectangle but anyway:
You can create custom Item in C++, for example singleton an fetch needed data from it.
Rectangle {
width: mySingleton.getWidth();
height: mySingleton.getHeight();
color: mySingleton.getColor();
}
You can create custom element derived from QQuickPaintedItem. All you need is reimplement QQuickPaintedItem::​paint(QPainter * painter) to draw your own rectangle. It's simpliest way to create ow element but not efficient since it uses QPainter.
Create custom element deriver from QQuickItem. You will need to reimplement QSGNode * QQuickItem::​updatePaintNode(QSGNode * oldNode, UpdatePaintNodeData * updatePaintNodeData). That's fast and reliable way but requires OpenGL experience.
Also as (1), but painting on Canvas element

Cocos2d CCLabelBMFont how to add a background to string

I am wondering how can I add a border & background to labels generated via CCLabelBMFont class in cocos2d.
I don't want to use sprites because my labels are generated on the fly and will keep changing and the size of labels are also different.
Also, I want user to touch and move these labels across the screen. When user picks a label it wiggles a bit like in free air. In that case, I wish to keep low complexity and preserve memory and cpu calculations.
Anyone knows best ways to achieve this?
IOS app LetterPress has similar effects.
Create your own class, that will incapsulate creation of complex node.
It will have several layers, for example, the first layer can be simple CCLayerColor of given rect with zOrder -2, the next layer will be your CCLabelBMFont with zOrder -1 and then you can overload draw method to draw border over your control. All that you draw in this method will be drawn with zOrder 0.
Then you can encapsulate any effects in this class. For example, you can rotate it a bit with method pick, etc. Whatever you want.

Handing a touch on a rotated CCLayer

After I rotate a CCLayer, my boundingBox grows, instead of rotating. Perhaps to be expected.
My issue is, I'm relying on a user touch on this layer. When the layer is rotated as in the figure on the bottom of the attached image, the clickable area increases because I'm calling:
if(CGRectContainsPoint(clickableLayer.boundingBox, touchLocation))
This causes an issue because this bounding box after rotation is covering up other things that are also clickable.
How do I only perform an action if the actual layer is touched? I want something to happen when just the green box is clicked, not the boundingBox of the layer.
Thoughts?
You can use CGMutablePathRef to detect transparent part:
Refer my answer in this thread.
Information about How to create CGPath:Here
For more information, Click Here
This thread got me to my answer: http://www.cocos2d-iphone.org/forum/topic/272336

Selecting different regions of a worldmap

In cocos2d for iPhone, how can I turn a selected portion of the screen into a menu item with selector functionality?
Imagine a worldmap with curved borders between different regions. When the player touches one of these regions, there should be a selector / callback for it. Sort of like a standard menu, but without making a label or an image selectable. Instead, what I want is to be able to specify the clickable area manually.
How about making a CCLayer that will contain this custom region? CCLayer already implements the touch delegates, and you could easily start capturing the regions by setting self.isTouchEnabled to true.
Define the areas of your world map manually, ideally as rectangles for polygons you'll need to look up polygon intersection test. Then just use CGRectContainsPoint with all rectangles and the touch point. If the touch is inside a world area, run whatever code needs to run.