I'm using Raphael_2.01 and would like to rotate an object at arbitrary position.
(WindowsXP, Firefox3.6)
example: http://uproda11.2ch-library.com/326446b6u/11326446.png
This rectangle (rect0) rotates thirty degrees at its lower right point.
The parameters are:
var rectX = rect0.getBBox().x;
var rectY = rect0.getBBox().y;
var rectW = rect0.getBBox().width;
var rectH = rect0.getBBox().height;
var rot = 30;// rotation
var rotX, rotY;// arbitrary position
What code should I use ? I can't image suitable method.
thanks,
If I understand the question correctly, it's rect0.rotate(30, rotX, rotY);.
Related
I'm a beginner in Godot I want to shoot an object that is already in the game towards where the cursor's position is, and the method I created for it works fine but depending on the distance between the object and the cursor the speed changes. can anyone please help me make the speed constant?
I used this:
func _process(_delta):
if Input.is_action_just_released("tap"):
var mousepos = get_viewport().get_mouse_position()
var ballpos = self.get_position()
var x = mousepos.x - ballpos.x
var y = mousepos.y - ballpos.y
velocity = Vector2(x,y)
You can normalize your vector, which gives you a vector of unit length:
velocity = Vector2(x,y).normalize()
And then scale it by the speed you want:
velocity = Vector2(x,y).normalize() * speed
Where speed is a previously defined variable or constant. Something like this will do:
var speed := 100.0
You, of course, will want to tweak the value. So perhaps you want to export it so you can set it form the inspector:
export var speed := 100.0
By the way, you can rewrite the code you have to this:
var mousepos = get_viewport().get_mouse_position()
var ballpos = self.get_position()
velocity = mousepos - ballpos
Adding the changes suggested above we have:
var mousepos = get_viewport().get_mouse_position()
var ballpos = self.get_position()
velocity = (mousepos - ballpos).normalize() * speed
Which you can rewrite to this:
var mousepos = get_viewport().get_mouse_position()
var ballpos = self.get_position()
velocity = ballpos.direction_to(mousepos) * speed
I'm trying to make it so if a function is called an area covered by a Collisionshape2D gets its tiles removed in a TileMap node. My problem is the area deleted doesn't match the Collisionshape2D's. Any insight is appreciated! Thank you.
My code:
func changeArea(collionshape):
var corridorTile = $CorridorTiles
var rect = Rect2(collionshape.position, collionshape.shape.extents*2)
var topleft = corridorTile.world_to_map(rect.position)
var bottomright = corridorTile.world_to_map(rect.end)
for x in range(topleft.x, bottomright.x):
for y in range(topleft.y, bottomright.y):
corridorTile.set_cell(x, y, -1)
Edit1*
Upon changing the code to:
func changeCorridorTile(collionshape):
var corridorTile = $CorridorTiles
var extents:Vector2 = collionshape.shape.extents
var topleft = corridorTile.world_to_map(collionshape.position - extents)
var bottomright = corridorTile.world_to_map(collionshape.position + extents)
for x in range(topleft.x, bottomright.x):
for y in range(topleft.y, bottomright.y):
corridorTile.set_cell(x, y, -1)
corridorTile.update_bitmask_region()
The cells in the tileMap which the collisionShape2D area covers get deleted. And I update them using .bitmask_region() method.
First thing I notice, from the top of my head: The Rect2 position is a corner, but the CollisionShape position is the center.
You would have to do it like this:
var extents:Vector2 = collionshape.shape.extents
var rect := Rect2(collionshape.position - extents, extents * 2)
Now, on a second look, you don't need the Rect2 at all:
var extents:Vector2 = collionshape.shape.extents
var topleft = corridorTile.world_to_map(collionshape.position - extents)
var bottomright = corridorTile.world_to_map(collionshape.position + extents)
One more thing: I believe that is in local space of the parent of the CollisionShape2D (an Area2D, I guess). So, if that is not working, it might be because you need to do it in global space. Hopefully you don't have any rotation (which would just mess the whole thing up) or scaling, so that would only be a matter of using global_position.
Addendum: I forgot something, world_to_map does not take global coordinates. Try this instead (assuming no rotation or scaling):
var extents:Vector2 = collionshape.shape.extents
var position := corridorTile.to_local(collionshape.global_position)
var topleft = corridorTile.world_to_map(position - extents)
var bottomright = corridorTile.world_to_map(position + extents)
I have created the following method to outline an 2D polygon using an Line2D node (in favor of _drawing because of texturing and round jointing capabilities of the Line2D node):
func Set_Polygon_Outline(_polygon_node: Node2D, _width: int = 5, _color: Color = Color.black, _texture: Texture = null) -> void:
if _polygon_node is Polygon2D:
var _polygon: PoolVector2Array = (_polygon_node as Polygon2D).polygon
if _polygon.size() >= 3:
# Line2D node setup
var _line_node: Line2D = null
var _line_name: String = str(_polygon_node.name, "_Line")
if not _polygon_node.has_node(_line_name):
_line_node = Line2D.new() ; _line_node.name = _line_name ; _polygon_node.add_child(_line_node)
else: _line_node = _polygon_node.get_node(_line_name) as Line2D
# Line2D properties setup
if _line_node != null:
_line_node.width = _width ; _line_node.default_color = _color ; _line_node.joint_mode = Line2D.LINE_JOINT_ROUND
if _texture != null:
_line_node.texture = _texture ; _line_node.texture_mode = Line2D.LINE_TEXTURE_STRETCH
var _points: PoolVector2Array = _polygon ; _points.append(_polygon[0]) ; _line_node.points = _points
How would it be possible to replicate the round point jointing on point 0 in the same way as the other points?
The result meets expectations except on the closing points (from 4 to 0)
One approach I have tried is appending an additional point (point 1) to the _points Array. While the un-textured one looks as desired, the textured variant is slightly off on the additional line because of the two superimposing textures with alpha values making it look "bolder".
Another (very unorthodox approach) is creating two polygons: one black and one with an blur shader, using the following method:
func Set_Polygon_Shadow(_polygon_node: Node2D, _size: float = 10.0, _color: Color = Color.black) -> void:
if _polygon_node is Polygon2D:
var _polygon: PoolVector2Array = (_polygon_node as Polygon2D).polygon
if _polygon.size() >= 3:
# Shadow Polygon node setup
var _shadow_name: String = str(_polygon_node.name, "_Shadow")
if not _polygon_node.has_node(_shadow_name):
var _shadow_node: Polygon2D = Polygon2D.new()
_shadow_node.polygon = Geometry.offset_polygon_2d(_polygon, _size).front() ; _shadow_node.color = _color
_shadow_node.show_behind_parent = true ; _polygon_node.add_child(_shadow_node)
# Blur Polygon node setup
var _blur_node: Polygon2D = Polygon2D.new()
_blur_node.polygon = Geometry.offset_polygon_2d(_polygon, _size * 2.0).front()
_blur_node.material = ShaderMaterial.new()
_blur_node.material.shader = preload("res://shaders/Shader_Blur.shader")
_blur_node.material.set_shader_param("Strength", 2.0)
_blur_node.show_behind_parent = true ; _polygon_node.add_child(_blur_node)
The shader code:
shader_type canvas_item;
uniform float Strength : hint_range(0.0, 5.0);
void fragment() {COLOR = textureLod(SCREEN_TEXTURE, SCREEN_UV, Strength);}
The result looks good but I can't possibly imagine using this approach on a large number of polygons.
Thank you kindly,
Mike.
If using a Line2D is a viable solution, except for fixing the loop, then let us fix the loop.
For a Line2D to loop seamless, even with transparency, it must close in a straight segment (not a corner). And have no end caps.
Thus, I suggest to move the first point, half way between its original position and the second point. Then you add at the end the original position of the first point, following by a copy of its moved position...
Like this:
# Let o be a copy of the original first point
var o = _points[0]
# Let m be the middle of the straight segment between the first and second points
var m = o + (_points[1] - o) * 0.5
_points[0] = m # The line now starts in m, we are moving the first point forth
_points.append(o) # Since we moved the first point forth, add its original position back
_points.append(m) # Add m at the end, so it loops, in the middle of a straight segment
That should result in a Line2D that loops seamlessly.
I got four different coordinates that is making a square in the openlayers map. But I want to know if it is possible that instead of breaking the square shape, is it possible to just grab one of the corners and resize (make bigger/smaller) the square?
My coordinates are as follows:
var x_1 = 28.0244307;
var y_1 = -25.8635238;
var x_2 = 28.0244307;
var y_2 = -25.8835238;
var x_3 = 28.0444307;
var y_3 = -25.8835238;
var x_4 = 28.0444307;
var y_4 = -25.8635238;
And then the code to resize it, but it is breaking the square shape:
var coords = [
[x_1, y_1],
[x_2, y_2],
[x_3, y_3],
[x_4, y_4],
[x_1, y_1]
];
var polygon = new ol.geom.Polygon([coords]);
var feature = new ol.Feature(polygon);
polygon.transform('EPSG:4326', 'EPSG:3857');
var vectorSource = this.vectorSource;
vectorSource.addFeature(feature);
var select = new ol.interaction.Select();
var modify = new ol.interaction.Modify({
features: select.getFeatures(),
});
var snap = new ol.interaction.Snap({
source: vectorSource,
});
this.map.addInteraction(select);
this.map.addInteraction(modify);
this.map.addInteraction(snap);
Just create a polygon with your 4 points an use a GeometryFunction in your style to only display the points.
Then use ol-ext ol/interaction/Transform to modify the shape.
What is the best practice for resizing say an Ellipse or Rectangle on another SVG element?
If I check for the onMouseMove event on the ellipse when I am out of it, the resizing stops. I was thinking to implement the listener on the svg element as well and pass the information to the ellipse I started the resizing on. This means having a generic Resize() method on the svg element that passes to the Resize() of the selected ellipse.
Isn't there an easier way?
I'm currently doing it with Dart, but it should be the same with javascript.
An example is an <svg> element with a <g> containing <rect> and an <ellipse>. If I start to resize the rectangle on a rectangle.onMouseMove, the moment I'm outside it, it stops resizing. To avoid this, I have to use the svg.onMouseMove, and use a resize method that resizes the rectangle. To know that it's the rectangle to be resized, I check for onMouseDown and again check the target (MouseEvent.target on Dart. Not sure how to detect what I'm touching without doing a cumbersome check on id maybe). Note that what I am trying to accomplish is to use the rectangle to resize the ellipse. I'm showing the rectangle only when resizing.
The following code will create a circle and resize when you start dragging.
It also works when the mouse gets outside the circle.
Maybe you can modify this to your liking.
Oh, and my Dart-code might not be the best, as I just recently started learning Dart.
Any improvements are welcome.
import 'dart:html';
import 'dart:svg';
import 'dart:math' as math;
void main() {
// add new svg
var svg = new SvgSvgElement();
svg.style.width = '400px';
svg.style.height = '400px';
svg.style.border = '1px solid black';
var body = document.querySelector('body');
body.append(svg);
// add group
var g = new SvgElement.tag('g');
svg.append(g);
// center of circle
var center = new math.Point(200, 200);
var startR = 70;
var newR = 70;
// add circle
var circle = new CircleElement();
circle.setAttribute('cx', center.x.toString());
circle.setAttribute('cy', center.y.toString());
circle.setAttribute('r', startR.toString());
circle.setAttribute('fill', 'green');
g.append(circle);
circle.onMouseDown.listen((MouseEvent E) {
var startOffset = E.offset;
var startDistance = startOffset.distanceTo(center);
math.Point offset = E.offset;
// now start listening for document movements so we don't need to stay on the circle
var move = document.onMouseMove.listen((MouseEvent E) {
// calculate new position
var movement = E.movement;
offset = new math.Point(
// multiply with 0.5 to make the mouse move faster than the circle grows
// that way we show that the mouse movement also works outside the circle element
offset.x + movement.x * 0.5,
offset.y + movement.y * 0.5
);
// calculate new distance from center
var distance = offset.distanceTo(center);
// calculate new radius for circle
newR = distance / startDistance * startR;
// resize circle
circle.setAttribute('r', newR.toString());
});
// and stop all listening on mouseup
var up = document.onMouseUp.listen(null);
up.onData((MouseEvent E) {
move.cancel();
up.cancel();
startR = newR;
});
});
}
Hope this helps,
Kind regards,
Hendrik Jan