I have created multiple lines in Phaser 3 and now need to remove them. I am mainly searching for a way to delete them entirely instead of just making them invisible. The code I have used to create the lines is below:
graphics = game.add.graphics({ lineStyle: {width: 4, color: 0xa9a9a9 } });
line = new Phaser.Geom.Line(100, 100, 200, 200)
graphics.strokeLineShape(line)
Thanks
you're looking for .destroy()
graphics = game.add.graphics({ lineStyle: {width: 4, color: 0xa9a9a9 } });
line = new Phaser.Geom.Line(100, 100, 200, 200)
graphics.strokeLineShape(line)
if(//do something) {
graphics.destroy();
}
This will completely destroy the asset from the game. there is no undestroy method so you will have to call a new line to spawn it. :)
Hope this helps!
Related
My code is here please look it. I have try my option but stuck in this.
https://www.codepile.net/pile/7mPpA9m0
What i do and please share me best solution. I'm stuck from last 2 weeks. in this problem please help me
As mention in a previews comment (I couldn't answer because the question was closed), the problem is the bounding-box of the physics objects.
It could be the player or the platform, depending on the images.
To know for sure turn on the debug information(debug: true) in the config of the Phaser Game Object. (a nice demo can be found here: https://phaser.io/examples/v3/view/physics/arcade/custom-debug-colors)
And than adjust the size of the bounding box. _(a nice demo can be found here: https://phaser.io/examples/v3/view/physics/arcade/smaller-bounding-box)
I here you can see what I mean in action.
The red and white player would have the same bounding box, but I made the box of the white player smaller with the function setSize and adjusted the position of the bounding box with the function setOffset.
Here a working Demo:
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
scene: {
create: create
},
physics: {
default: 'arcade',
arcade: {
gravity:{y:100},
//show debug information
debug: true
}
},
banner: false
};
function create () {
// JUST FOR DEMO START
let graphics = this.make.graphics();
graphics.fillStyle(0xffffff);
graphics.fillRect(10,5,10,25);
graphics.generateTexture('player', 30, 30);
// JUST FOR DEMO END
let platform = this.add.rectangle(150, 120, 100, 20, 0x00ff00)
.setOrigin(0, 1);
this.physics.add.existing(platform)
.body
.setImmovable(true)
.setAllowGravity(false);
let player = this.add.image(136, 50, 'player')
.setOrigin(.5, 1)
.setTint(0xff0000);
this.physics.add.existing(player);
let player2 = this.add.image(136, 50, 'player')
.setOrigin(.5, 1);
this.physics.add.existing(player2)
.body
// CHANGE SIZE OFF PHYSICS BOX
.setSize(14, 25, false)
.setOffset(8, 5)
.setAllowGravity(false)
.setVelocityY(10)
this.physics.add.collider(player, platform);
this.physics.add.collider(player2, platform);
}
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js">
</script>
Depending on, if you player's or your platforms bounding-box is to big you will have to adjust it, or make images, that have less transparent borders.
developing this app in which there several images on a canvas and i am using using fabricjs.
i want to add text overlaid on an image and then be able to remove it as well.
is a way to directly write over the image or do i have to create another layer and write onto it.
there is text related like
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);
the problem with the above approach is that if the image moves the text will not, so is it possible that the text could be written directly above the image?
any ideas of how this could be done? i revived several discussions where it's not as clear, how it could be done.
any pointers would be most appreciated.
This could be achieved by creating an image and a text object, then adding both the objects to a group and finally adding that group to the canvas.
Here's an example, showing that in action ...
var canvas = new fabric.Canvas('canvas');
// load image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function (img) {
img.scaleToWidth(100);
img.scaleToHeight(100);
// create text
var text = new fabric.Text('hello world', {
left: 10,
top: 5,
fontSize: 15,
fontFamily: 'Verdana',
fill: 'white'
});
// add image and text to a group
var group = new fabric.Group([img, text], {
left: 50,
top: 50,
});
// add the group to canvas
canvas.add(group);
});
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>
I am not quite clear of what exactly is your requirement.
Regardless of it, i have created a JS Fiddle for you.
https://jsfiddle.net/xpntggdo/9/
textBox=new fabric.Textbox("Enter Text",{
fontSize: 16,
fontFamily: 'Arial',
textAlign: 'left',
width: 180, // for 20 characters
top:arrowTop,
left:arrowLeft
});
canvas.add(textBox);
canvas.renderAll();
This might be of a little help at least. Comment on this answer and I will try to help you more on it if that is possible for me.
could someone please point me in the direction for how to enable double click on fabric images? i came across this solution
FabricJS double click on objects
I am trying to not use FabicjsEx
but i am unable to get anything to work correctly. can someone please let me know the best way to accomplish this?
The best way to accomplish this, is to use fabric.util.addListener method.
Using that you could add a double click event for the canvas element and to restrict it to any particular object ( ie. image ), you would have to check whether you clicked on an image object or not before performing any action.
ᴅᴇᴍᴏ
var canvas = new fabric.Canvas('canvas');
// add image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function(img) {
img.set({
top: 50,
left: 50
})
img.scaleToWidth(100);
img.scaleToHeight(100);
canvas.add(img);
});
// add rect (for demo)
var rect = new fabric.Rect({
left: 170,
top: 50,
width: 100,
height: 100,
fill: '#07C'
});
canvas.add(rect);
// mouse event
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
if (canvas.findTarget(e)) {
const objType = canvas.findTarget(e).type;
if (objType === 'image') {
alert('double clicked on a image!');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<canvas id="canvas" width="320" height="200"></canvas>
This is not Drawing Mode.
I want according to some condition to be able to change the cursor when I am over some element. Something like
$('#canvasID').css('cursor','pointer');
but this is not working for me. Do you know some property from their library?
After some tests this is working for me:
canvas.observe('mouse:over', function (e) {
if (e.target.get('type') == 'line') {
e.target.hoverCursor = 'crosshair';
}
});
FabricJS have an in-built mechanism for setting custom cursor (unfortunatelly only for hover and move events):
var canvas = new fabric.Canvas('myCanvas');
var circle = new fabric.Circle({
radius: 20, fill: 'red', left: 10, top: 10
});
circle.hoverCursor = 'no-drop';
canvas.add(circle);
More cursor types you can find here.
I want to load different shapes in FabricJS based Canvas using loadSVGFromURL(), but can't. Documentation is also not complete on this. I just want a complete example. I can load it from string, but string creates spaces which creates problems when rendering. Here is my code:
var canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL('BlueFlower.svg', function (objects) {
var SVG = fabric.util.groupSVGElements(objects, options);
canvas.add(SVG).centerObject(SVG).renderAll();
SVG.setCoords();
});
I have done an example on jsfiddle, that I create two objects and I load an svg image from url, you can take a look.
Here is an example
The snippet for load svg is this:
var site_url = 'http://fabricjs.com/assets/1.svg';
fabric.loadSVGFromURL(site_url, function(objects) {
var group = new fabric.PathGroup(objects, {
left: 165,
top: 100,
width: 295,
height: 211
});
canvas.add(group);
canvas.renderAll();
});