I am using KineticJS. I have a canvas with draggable, resizable images on it (code was just copied from: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/). The draggable, resizable images are on one layer, and I have a rectangle on another layer. The rectangle layer is on top. The rectangle is transparent (no fill).
When I drag the image under the rectangle and again try to click on the image, of course the image does not move - because it's not on top. The rectangle is on top. However I'd like to click "through" the transparent rectangle and keep acting on the image underneath. In other words, when you click and drag I want it to be as if the rectangle is not there, but I want the rectangle to show on top.
Here is a demo:
http://jsfiddle.net/T8m64/106/
Drag the image under the rectangle and you'll see that you can no longer grab it since it's underneath. [I am fully aware this is not "unobtrusive javascript", i.e. the javascript is embedded in the html. Sorry. I just copied it from the first link above.]
Anyway, as I said, the demo is copied from that first link above, with the following code added at the end:
//Overlying rectangle. I'm doing it as a path not a rect, because that's ultimately what I care about
var rect = new Kinetic.Path({
x: 0,
y: 0,
data: 'm 2.0012417,2.0057235 125.7664883,0 0,105.8016465 -125.7664883,0 z',
fill: 'none',
stroke: 'black',
scale: 1
});
// add the shape to the layer
var rectLayer = new Kinetic.Layer();
rectLayer.add(rect);
stage.add(rectLayer);
rectLayer.moveToTop();
Thanks
You can tell a layer to stop listening for events.
This will allow layers underneath to respond to those events.
rectLayer.setListening(false);
Related
We are using forge viewer to display Revit files. We want to display a custom image as background. We tried different options. However, the image is rotating and we don't want the custom image to rotate. Would it be possible to add the custom image using code to the Environment and avoid rotating? We also tried using three.js mesh. It displays the image but the image is rotating. What can we do to avoid the custom image from rotating?
Thank you for your help.
The following is our sample code using Mesh. It displays the image but it rotates.
const imgTexture = THREE.ImageUtils.loadTexture('images/bsd-speclink-logo.jpg')
var transparentMaterial = new THREE.MeshBasicMaterial({
map: imgTexture,
color: 0xffffff,
opacity: 0.1,
transparent: true
})
viewer.impl.matman().addMaterial('transparent',transparentMaterial,true)
var geometry = new THREE.PlaneGeometry(50, 40, 40, 40);
var mesh = new THREE.Mesh(geometry, transparentMaterial)
mesh.position.set(60, -60, 0);
viewer.impl.scene.add(mesh)
viewer.impl.invalidate(true)
See this blog post here to set the canvas transparent so you can slip in a background underneath.
Or try the skybox workaround here to emulate background in the canvas.
I have a 100 (width) x 100 (Height) canvas arranged in a row and column of 5 x 6
it has a triangle drawn on them currently the canvas are arranged in such a way that every canvas overlaps each other. i want to add click on the triangle area
is there a way to bypass click to the underlying canvas when the click is in transparent area of the top canvas
With EaselJS, you can use the nextStage property to pass CreateJS mouse interactions to canvases that are below one another in the DOM.
// Overlapping Canvases
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
// Multiple Stages
stage1 = new createjs.Stage("canvas1"),
stage2 = new createjs.Stage("canvas2");
// Mouse events on content in each stage
stage1child.on("click", handleClick);
stage2child.on("click", handleClick);
// Stage 2 is higher in the DOM, so it will receive the mouse events first.
// Pass them on to the lower canvas/stage
stage2.nextStage = stage1;
Here is more info:
nextStage documentation
TwoStages demo in GitHub
TwoStages demo on createjs.com
I didn't entirely understood your question, but if you just want for the click to register to the Canvas bellow the shape, then you need to disable the mouse interaction for the shape on top, like this:
triangleShape.mouseEnabled = false;
By doing so, any mouse events will be ignored for this shape and passed instead to the objects bellow it.
I just started working on as3. I want to create a Rectangle but without color fill, so I can see what is behind it on stage. I love to draw on that Rectangle, but it never works without color fill.
var Canvas_sp:Sprite = new Sprite();
this.addChild(Canvas_sp);
//here i love Rectangle be without collor fill not whit(FFFFFF)e color
//i love see what behind the Rectangle and draw over it
Canvas_sp.graphics.beginFill(0xFFFFFF);
Canvas_sp.graphics.drawRect(0,0,550,400);
thx for all
If you don't want a fill, don't begin one.
Omit this line:
Canvas_sp.graphics.beginFill(0xFFFFFF);
To achieve the goal you want, you need to set the alpha parameter to 0, and maybe, to draw just a border of a Rectangle. You can see an example here: example
In your case, you can try something like this:
Canvas_sp.graphics.beginFill(0xffffff, 0);
Canvas_sp.graphics.lineStyle(0x000000, 0.1);
Canvas_sp.graphics.drawRect(0, 0, 550, 400);
Canvas_sp.graphics.endFill();
I am currently attempting to make a button which is in the shape of a trapezoid.
I found a method of creating the shape which involved CSS making borders and such.
The CSS method worked in the way that it made the shape, but I ran into an issue where the whole element is contained in a rectangle, so when you click in the white spaces outside of the trapezoid it will still register as a click in the element.
In short, I am trying to make the HTML element to be the shape, of a trapezoid, not just the visible shape itself. Thus when a user clicks any area around the button that is outside the visible Trapezoid, but may be within the actual boundaries of a button rectangle, it should ignore the click. Thanks.
Edit:
It was asked that I show an example of what I mean.
http://jsfiddle.net/MichaelMitchell/aR72g/9/
In this link, there is the red trapezoid, but you can see the background color is also green, and when you were to click the green it still activates an onclick. In other word, I only want the red to be able to trigger the onclick.
You cannot have other clickable areas than rectangles in HTML if you are not willing to do the trickery involving map attribute and image (see docs), but even then your image will always wrapped in rectangle bounding box (so you can only pretend to have different shape by using images with transparency and said map).
You can work around this by giving it an onmousemove event that determines whether or not that coordinate is actually inside the trapezoid and adds/removes the onclick event accordingly. Something like this:
<figure id ="trapezoid" onmousemove="trapezoidMouseMove(event)">
<p>Button</p>
</figure>
<script>
function trapezoidClick(e)
{
//Whatever you need it to do
alert("inside");
}
function trapezoidMouseMove(e)
{
//Fill in the angle of your trapezoid
angle = Math.PI / 4;
insideLeft = e.offsetX > Math.tan(angle) * e.offsetY;
insideRight = e.offsetX < e.toElement.offsetWidth - Math.tan(angle) * e.offsetY;
if (insideLeft && insideRight)
{
e.toElement.style.cursor = "pointer";
e.toElement.onclick = trapezoidClick;
}else{
e.toElement.style.cursor = "default";
e.toElement.onclick = null;
}
}
</script>
I have a BitmapData object named myBitmapData. It was loaded of PNG of size 104x104. This PNG represents a red circle on the transparent background.
There is also a Sprite object named myBackground. I want render that red circle into myBackground.
myBackground.graphics.beginBitmapFill(myBitmapData);
myBackground.graphics.drawRect(0, 0, myBitmapData.width, myBitmapData.height);
myBackground.graphics.endFill();
addChild(myBackground);
Everything is fine. I see a red circle in the left top of myBackground.
But when I change the third line to
myBackground.graphics.drawRect(0, 52, myBitmapData.width, myBitmapData.height);
and expect my circle to be translated 52 pixels down, I actually obtain something strange (for me :)): there are two red half-circles (they form like hourglass).
So, the question is: how do I render myBitmapData into the random position of myBackground?
P.S.
In the case of
myBackground.graphics.drawRect(0, 104, myBitmapData.width, myBitmapData.height);
it is circle again :)
This is caused by beginBitmapFill's default repeat = true parameter. There's an example in the docs. Disabling the repetition won't work though, you'd just get a half circle then.
There are several ways to fix this:
Use a Matrix with a translation (displacement) as argument in beginBitmapFill.
Draw the rectangle at 0,0 on another Sprite, and move that sprite to where you want it on the background.
Don't draw directly to the background, but to another bitmap using copyPixels. Then fill the background with that bitmap.