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
}
Related
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.
I just want to know that is there any website that give brief information about canvas.
I am working on my project. in which one canvas and 4 buttons.
These are four buttons:CIRCLE, RECTANGLE, SQUARE and ANIMATED RAINBOW.
When I click on circle button in canvas animated circle are shown when I click on rectangle button that time circle are changes into rectangle in ease in/out style in animation. Shapes changes into another shapes but in animated style on canvas.
I read lots of article watch many videos but I cannot find a solution.
Below I show an image.
If any one tell me and give me some suggestion where I go for study.
Thank you.
Make 4 different functions in JavaScript circle, rectangle, square, rainbow.
And make 4 different classes in case like that.
Then set the value of convas class according to shape in JavaScript functions.
Like if you click on circle button.
First set HTML code.
<button id = "circle" onclick ="circle"></button>
When user click on this button it will call circle function write code like that in circle function in JavaScript.
function circle(){
canvas = document.getElementById("canvas");
canvas.class = "circle";
//This is class name which you have to make in case
}
I have a doughnut chart made by Chart.js. When my mouse comes over a portion, the portion label appears such as RED: 300.
What I want is to show this label in the middle when I click it.
I have the code to write in the middle, but I need to know how to make portions to behave as buttons.
I think you're looking for the getSegmentsAtEvent(evt) method.
canvas.onclick = function(evt){
var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);
// => activePoints is an array of segments on the canvas that are at the same position as the click event.
};
If activePoints is empty, that means you can just return because no segment was clicked. Otherwise, go ahead and draw your tooltip.
I've created a Canvas and have written out a grid(resembles graph paper) with the X & Y coordinates successfully. What I'm looking to do now is the following:
-When someone clicks with a mouse a square in the grid will change to a different color
-Once a block is selected that data will not change
You need a separate 2D array that maintains the state for each (x, y) grid position.
When a click happens, check that state array to see if the cell was clicked before, and update the canvas as appropriate.
I created a little demo to show you: http://jsfiddle.net/alnitak/xN45K/
I've got an isometric map with selectable tiles. Where the tiles become "highlighted" when they are clicked on, and return to normal when a different tile is clicked. This is done by changing the background image to one of a highlighted looking tile.
However, I noticed that the tiles do not always recognize that they were clicked on the first click. For example, when first starting, clicking on the tile closest to the screen will usually not do anything. Clicking on it again or even three times will finally make it change color, but this multiple click requirement is still present when trying a different tile. Eventually the tiles will change after one click, OR if the mouse press is held down for a second on the tile before releasing.
In the example below, you can see my tile click event handler. Simply search for "TODO" in the JS code.
The problem is likely because there are two tile click events. Can this problem be fixed?
http://jsfiddle.net/briz/jdhPW/8/
I recommend you test out clicking on the first row of tiles. The tiles have the transparent pixels around them, so it's easy to think you're clicking a tile in the middle when your mouse is still registering the tile around it. You can see which tile is currently "active" by it becoming slightly transparent when hovered over.
EDIT I found a solution! I can register the tiles beforehand by calling it like this:
$.fn.gameMap.tileInfo = function(tile,x,y)
{
// Registers each tile with their unique id
tile.id = obj.attr('id') + '_tile_' + x + '_' + y;
// When the tile gets clicked
tile.click(function()
{
.....
}
Then there is only a single instance of the click event, and it works on the first click every time
I went and cleaned up the code a bit using more jQuery than in your original.
$.fn.gameMap.tileInfo = function(tile,x,y) {
// When the tile gets clicked
tile.click(function() {
// When the tile gets clicked again?
var regularTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesWatermark.png)";
$(".content .tile").css("background-image", regularTile);
// Makes the tile apparently selected
var selectedTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesSelected.png)";
tile.css("background-image", selectedTile);
});
};
Even better would be to simply add a click event to the tiles like this since it binds them all at once (although you would have to restructure your code a bit...):
var tiles = $(".content .tile").click(function() {
// When the tile gets clicked again?
var regularTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesWatermark.png)";
tiles.css("background-image", regularTile);
// Makes the tile apparently selected
var selectedTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesSelected.png)";
tile.css("background-image", selectedTile);
});