I am using magic-wand-js and I wanted the selected area to get colored but I've observed it's not selecting the borders from right and bottom of area we select. Although I am calling floodFill with borders as true.
mask = MagicWand.floodFill(image, x, y, currentThreshold, old, true);
Here complete code in jsfiddle
Can be seen clearly by uploading this image, for example select the yellow box in it and click on 'Create polygons by current selection' button, you would see a yellow line remain at bottom and right.
Related
I have created a map using image on canvas and whenever i click on the image to mark the position (the position will be marked in the red rectangle label form) then the rectangle label is appearing far away from the actual clicked position and not marking accurately on the clicked position.
How can i fix that issue?
I have reproduced the issue in the codesandbox:
Here is my codesandbox url:
https://codesandbox.io/s/mapediting-87mx4y
I'm using Code.org's game lab to make Tetris, and I have this sprite. https://ibb.co/zsT4LN6
You see the gray spots? They're like an empty background, but whenever a sprite touches the empty background, it stops moving. I want it to ignore the empty space. Is there a way to remove that or a block code to detect if a sprite touches a color
Sounds like your hitbox is different then you want.
Option 1: graphical editing (design view)
In GameLab you can change this within the tab "Animation".
On the far right I see following elements:
Resize as the top option (purple icon)
Crop the Sprite as the bottom option (grey tiles)
Option 2: writing code (source view)
There are two approaches (commands on sprite) you'll want to try:
Use sprite.debug to set the sprite's debug state to true. Then next time you run your code it will display a neon-green hitbox around the sprite.
You can change that hitbox through code using sprite.setCollider().
Both commands are demonstrated in the following snipped:
sprite.debug = true;
sprite.setCollider("rectangle", 0, 0, 20, 80, -45);
I create a pie chart and want to grey out all other color but leave the color I clicked. At first I used chart.series[i].color = 'rgb(100,100,100)' to change the color, but it did not work. Finally I used chart.series[i].graphic.attr({ fill: 'rgb(100,100,100)' }) and this time it works. However, when I hover in the area, the grey area change back to its original color, probably the mousein/out event still keeps its original color, so everytime I hover it grasp the old color to display. Is there any better way to change the color of pie and after change the color stays till next click event? I also tried update/redraw but it is wired and like some kind of delay action.
The code is here demo
What I want is every time when select colored part in pie chart, other is greyout, and do not change color until I select it or I reselect the color one to reset the overall graph.
However, now it grey out, but when I hover, it change the color back.
I am trying to draw a rectangle on the click of a button.
User can select a color and then click button to draw a specific colored rectangle.
How to get this property.
In my fiddle when you click Layer button you can get a rectangle on the canvas. if you uncheck the check box and click it again you will get a rectangle at the same place . I want to create different colored rectangles every time.
This is the code pen which describes the same colored rectangle every time.
http://codepen.io/anon/pen/Ffhjg/
This is the code I am trying to edit.
It is drawing it with black every time now. :(
http://codepen.io/anon/pen/zaFfw
Add the following code in your init3
var oMaterialCB = document.getElementById("pickColor");
var sMaterial = oMaterialCB.options[oMaterialCB.selectedIndex].text;
var sMaterialColor = oMaterialCB.options[oMaterialCB.selectedIndex].value;
m_iCurrentLayerIndex = AddToCB('LayerList', sMaterial + 'Layer');
//x,y, width, height
var l_dYOfPrevLayer = document.getElementById('TextLayer_ULy').value;
var Display_DY = DisplayCoords(l_dYOfPrevLayer); //m_oSetup.Layers[m_iCurrentLayerIndex-1].BottomBoundary;
addRect(0,Display_DY,640,100, sMaterialColor);
// get the last box, update the index for that box and type of that box
}
If I create a Label using Raphael, the default style is a black block with white text.
How can I change the background box colour, but not the text colour? I've tried:
paper.label(x, y, value).attr("fill", colour)
but that also fills the text and I end up with invisible text.
I also can't simply change the default colour in this function because I need to have a few different ones depending on a line that it's added to:
As you noticed,
Paper.label(x, y, value).attr(
fill : color
);
changes both the background fill color and the text fill color, resulting in invisible text.
Unspecified correctly explained that this is an array, so each portion must be altered separately, as they illustrated. However, they didn't mention the easiest way to change update both sets of attributes, so I wanted to share this tip. In order to do this, change the attributes into an array with two sets. The first element is the background, and the second is the text.
Paper.label(x, y, value).attr([{
fill : backgroundColor
}, {
fill : textColor
}]);
You can add any other applicable attributes to each part. Here is a working example: http://jsfiddle.net/VzpeG/1/
I was working on a graph similar to this and used:
.attr({fill: "#EF7C4D"})
Let me know how this goes...
var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});
text.label().attr({fill:"#f00"});
Here's a working fiddle http://jsfiddle.net/vpGyL/216/
Set any color on text or on label both apply separately...Hope this helps !
Digging in furthur...Paper.label(x,y,text) is different from Element.label()
If you look at the source code Paper.Label(x,y,text) is a set of rectangle element & text element, so doing .attr({fill:"SomeColor"}) applies to the entire set, hence both rectangle & text share same color(Hence the invisibility).
Oh yeah If you just want to change the text color do this Raphael.g.txtattr.fill = "#yourColorCode" But this changes the text color globally on all the charts and tooltips(don't seem to be a good idea).
While Element.Label as the documentation says is takes the context element & embed in a label tooltip, basically whatever element you use, applying .label will embed it inside a rectangle