I have a LineString and some points on it as Polygon. When I click on the yellow line, than the green polygon gets rendered behind the line. I would like to disable the click on the line.
Here is a picture about my problem
http://i57.tinypic.com/2rc3kg3.png
Here is a code snipet:
function PointDrawing(Lon, Lat, VectorLayer)
{
var circlreFeatureStyle = new OpenLayers.Style();
circlreFeatureStyle.fillColor = '#009900';
circlreFeatureStyle.fillOpacity =0.8
circlreFeatureStyle.strokeColor = '#004F00';
var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(Lon, Lat),
(1 * 15),
30
);
circleFeature = new OpenLayers.Feature.Vector(circle);
circleFeature.style = circlreFeatureStyle;
VectorLayer.addFeatures(circleFeature);
}
function LineDrawing(Map,VectorLayer)
{
var line = new OpenLayers.Geometry.LineString(points);
var style = {
strokeColor: 'yellow',
strokeOpacity: 4.5,
strokeWidth: 5
};
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
VectorLayer.removeAllFeatures();
VectorLayer.addFeatures([lineFeature]);
}
Related
I have a simple 3D object and I am able to rotate i.e., move with my left mouse button, around the centre of axis - works fine. When I pan using the right mouse button the axis also shifts, as such it no longer moves around it’s present axis.
How can I move the object around it’s current axis, no matter where I drag the object?
Below is the complete code of script.js
var scene = new THREE.Scene();
var axisHelper = new THREE.AxisHelper(100);
scene.add(axisHelper);
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.y = -200;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-100, 0, 100);
var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);
var backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('assets/');
mtlLoader.setPath('assets/');
mtlLoader.load('180319_object01.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('assets/');
objLoader.load('180319_object01.obj', function (object) {
object.scale.set( 200, 200, 200 );
scene.add(object);
object.position.x = -100;
object.position.y = -100;
object.position.z = 0;
});
});
var animate = function () {
requestAnimationFrame( animate );
controls.update();
renderer.render(scene, camera);
};
animate();
It is because your camera is being moved by the controller and not the object itself, rather than update the cameras position and direction ((ie which is what the orbit controller is doing).in your render method you'll want to update position and Euler angle on the object itself to achieve the desired effect. To do this you'll want to track and update the position and angle of rotation about the (y?) Axis of the object,in the object (model) space.hope that makes sense, let me know if you need me to elaborate.
When I set up text as a link, set a bounds shape, and set the hit area to the bounds shape, my hit area is off if the textAlign = 'center'. Any ideas?
var linkColor = "#0000ff";
var linkFont = "bold 14px Times";
var presentationLink = new createjs.Text("View Presentation", linkFont, linkColor);
presentationLink.textAlign = "left";
presentationLink.maxWidth = 170;
presentationLink.x = 300;
presentationLink.y = 125;
stage.addChild(presentationLink);
var plBounds = presentationLink.getTransformedBounds();
var s = new createjs.Shape().set({ x: plBounds.x, y: plBounds.y + plBounds.height });
s.graphics.s(linkColor).moveTo(0, 0).lineTo(plBounds.width, 0);
stage.addChild(s);
var hitAreaForPLink = new createjs.Shape(new createjs.Graphics().beginFill("#ffffff").drawRect(-10, -10, plBounds.width + 20, plBounds.height + 10));
presentationLink.hitArea = hitAreaForPLink;
stage.enableMouseOver();
presentationLink.on("mouseover", function () {
presentationLink.cursor = "pointer";
});
The hitArea is positioned according to its owner's coordinate system. That is, all of the owner's transformations are applied to the hitArea. This is so that if you were to animate the owner, the hitArea would track it as expected.
Since the transformation is already applied, you need to use getBounds, not getTransformedBounds. See this example: http://jsfiddle.net/gskinner/uagv5t84/2/
I have a client-server game that uses P2 for some basic physics stuff. I want to run Phaser with P2 on the client and raw P2 on the server. The client will use the local P2 to predict the results from the server. But I'm having trouble getting bodies to move at the same speed in phaser+p2 and raw p2.
Below is a demo of both running at the same time. Any idea what's going on here?
http://jsfiddle.net/ovcrn6bd/2/
<script src='https://cdn.rawgit.com/photonstorm/phaser/master/build/phaser.js'></script>
<script src="https://cdn.rawgit.com/schteppe/p2.js/master/build/p2.js"></script>
<canvas width="600" height="100" id="myCanvas" style='border:solid 1px'></canvas>
<script>
// Init phaser with a circle sprite.
PhaserController = function() {
var controller = this
var game = this.game = new Phaser.Game(600, 100, Phaser.AUTO, '', {
create: function() {
var radius = 20
var bmd = game.make.bitmapData(radius * 2, radius * 2)
bmd.circle(radius, radius, radius, '#ffffff')
var sprite = this.sprite = game.add.sprite(30, 30, bmd)
sprite.anchor.setTo(.5, .5)
game.physics.startSystem(Phaser.Physics.P2JS)
game.physics.p2.enable(sprite, false, false)
game.physics.p2.frameRate = 1/30
sprite.body.setCircle(radius, 0, 0, 0)
sprite.body.friction = 0
game.physics.p2.friction = 0
// Make the circle move at a constant speed.
sprite.update = function() {
console.log('sprite update')
sprite.body.velocity.x = 1
sprite.body.velocity.y = 0
}
}
})
}
P2Controller = function() {
// Create a p2 circle and prepare a canvas.
this.world = new p2.World({gravity:[0,0]})
var circleShape = new p2.Circle(20)
var body = new p2.Body({ mass:1, position:[30, 30] })
body.addShape(circleShape)
this.world.addBody(body)
var canvas, ctx, w, h;
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
// Animate the circle moving across the canvas.
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
var x = body.position[0],
y = body.position[1],
radius = body.shapes[0].radius;
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.stroke();
}
animate();
this.frame_rate = 1/30
// Start stepping the cicle.
var controller = this
function step_world() {
console.log('step p2')
body.velocity = [1, 0]
controller.world.step(controller.frame_rate)
setTimeout(step_world, controller.frame_rate)
}
step_world()
}
new PhaserController()
new P2Controller()
</script>
I solved this problem by simply using P2 separately from Phaser. I manually positioned my sprites at the location of the P2 bodies.
Your P2Controller seems to firing more frequently than your PhaserController. Not quite sure why this happening, but to fix the problem you just have to adjust one line.
Change
game.physics.p2.frameRate = 1/30
to
game.physics.p2.frameRate = 10/103
In fabricjs, I want to create a scene in which the object under the mouse rises to the top of the scene in z-index, then once the mouse leaves that object, it goes back to the z-index where it came from. One cannot set object.zindex (which would be nice). Instead, I'm using a placeholder object which is put into the object list at the old position, and then the old object is put back in the position where it was in the list using canvas.insertAt. However this is not working.
See http://jsfiddle.net/rFSEV/ for the status of this.
var canvasS = new fabric.Canvas('canvasS', { renderOnAddition: false, hoverCursor: 'pointer', selection: false });
var bars = {}; //storage for bars (bar number indexed by group object)
var selectedBar = null; //selected bar (group object)
var placeholder = new fabric.Text("XXXXX", { fontSize: 12 });
//pass null or a bar
function selectBar(bar) {
if (selectedBar) {
//remove the old topmost bar and put it back in the right zindex
//PROBLEM: It doesn't go back; it stays at the same zindex
selectedBar.remove();
canvasS.insertAt(selectedBar, selectedBar.XZIndex, true);
selectedBar = null;
}
if (bar) {
//put a placeholder object ("XXX" for now) in the position
//where the bar was, and put the bar in the top position
//so it shows topmost
selectedBar = bar;
canvasS.insertAt(placeholder, selectedBar.XZIndex, true);
canvasS.add(bar);
canvasS.renderAll();
}
}
canvasS.on({
'mouse:move': function(e) {
//hook up dynamic zorder
if (!e.target) return;
if (bars[e.target])
selectBar(e.target);
else
selectBar(null);
},
});
var objcount = canvasS.getObjects().length;
//create bars
for (var i = 0; i < 20; ++i) {
var rect = new fabric.Rect({
left: 0,
top: 0,
rx: 3,
ry: 3,
stroke: 'red',
width: 200,
height: 25
});
rect.setGradientFill({
x1: 0,
y1: 0,
x2: 0,
y2: rect.height,
colorStops: {
0: '#080',
1: '#fff'
}
});
var text = new fabric.Text("Bar number " + (i+1), {
fontSize: 12
});
var group = new fabric.Group([ rect, text ], {
left: i + 101,
top: i * 4 + 26
});
group.hasControls = group.hasBorders = false;
//our properties (not part of fabric)
group.XBar = rect;
group.XZIndex = objcount++;
canvasS.add(group);
bars[group] = i;
}
canvasS.renderAll();
Since fabric.js version 1.1.4 a new method for zIndex manipulation is available:
canvas.moveTo(object, index);
object.moveTo(index);
I think this is helpful for your use case. I've updated your jsfiddle - i hope this is what you want:
jsfiddle
Also make sure you change z-index AFTER adding object to canvas.
So code will looks like:
canvas.add(object);
canvas.moveTo(object, index);
Otherwise fabricjs don`t care about z-indexes you setup.
After I added a line object, I was make the line appear under the object using:
canvas.add(line);
canvas.sendToBack(line);
Other options are
canvas.sendBackwards
canvas.sendToBack
canvas.bringForward
canvas.bringToFront
see: https://github.com/fabricjs/fabric.js/issues/135
You can modify your _chooseObjectsToRender method to have the following change at the end of it, and you'll be able to achieve css-style zIndexing.
objsToRender = objsToRender.sort(function(a, b) {
var sortValue = 0, az = a.zIndex || 0, bz = b.zIndex || 0;
if (az < bz) {
sortValue = -1;
}
else if (az > bz) {
sortValue = 1;
}
return sortValue;
});
https://github.com/fabricjs/fabric.js/pull/5088/files
You can use these two functions to get z-index of a fabric object and modify an object's z-index, since there is not specific method to modify z-index by object index :
fabric.Object.prototype.getZIndex = function() {
return this.canvas.getObjects().indexOf(this);
}
fabric.Canvas.prototype.moveToLayer = function(object,position) {
while(object.getZIndex() > position) {
this.sendBackwards(object);
}
}
I have problem with canvas fillText function. I have this code :
scene.shapes['shop1'] = new Shape();
var ps1 = scene.shapes['shop1'].points; // for convenience
ps1[0] = new Point(1024, 66, 10); // left bottom
ps1[1] = new Point(694, 66, 10); // right bottom
ps1[2] = new Point(694, 466, 10); // right top
ps1[3] = new Point(1024, 466, 10); // left top
// Background
scene.shapes['shop1'].polygons.push(new Polygon(
[ps1[0], ps1[1], ps1[2], ps1[3] ],
new Point(0, 0, 1),
true /* double-sided */,
Polygon.SOLID,
[177, 216, 249]
));
scene.shapes['shop1Header'] = new Shape();
var ps1h = scene.shapes['shop1Header'].points; // for convenience
ps1h[0] = new Point(1024, 400, 11); // left bottom
ps1h[1] = new Point(694, 400, 11); // right bottom
ps1h[2] = new Point(694, 466, 11); // right top
ps1h[3] = new Point(1024, 466, 11); // left top
// Background
scene.shapes['shop1Header'].polygons.push(new Polygon(
[ps1h[0], ps1h[1], ps1h[2], ps1h[3] ],
new Point(0, 0, 1),
true /* double-sided */,
Polygon.SOLID,
[175, 175, 175]
));
var x = -1024;
var y = -500;
ctx.font = '60pt Calibri';
ctx.lineWidth = 3;
// fill color
ctx.fillStyle = 'blue';
ctx.fillText('Hello World!', x, y);
But it don´t create the text and only display the shop. Do you know, how to solve this problem? Thank you very much.
The value of x and y is negative so you are drawing outside of the canvas. If you set x to 0 and y to 0 + font-size it will draw the text in the top left corner.
EDIT: you need to add the font size to y.
ctx.font = "60px Calibri"; // Use pixels instead of points
ctx.fillText("Hello World", 0, 60);