I am try to drag a view to another view containing an html. But for some reason i am not able to drag over the html. Can any one tell me what is wrong in this code.
<canvas>
<include href="iFrame.lzx"/>
<view y="5" width="100" height="50" bgcolor="green">
<handler name="oninit">
this.bringToFront();
</handler>
<dragstate name="drg"/>
<text width="100%" bgcolor="gray" onmousedown="parent.drg.apply()" onmouseup="parent.drg.remove()">Drag me</text>
</view>
<view y="150" width="100%" height="300" bgcolor="blue" >
<html id="htdevice" src="http://www.openlaszlo.org" x="15" y="15" width="${parent.width - 30}" height="${parent.height - 30}"/>
</view>
</canvas>
you wrote mouse event listeners on text tag put your mouse on text then you can easily drag or write mouse event listeners for view tag then you can drag the view by putting your mouse pointer any where on the view(green)
Related
I want to create an SVG file with four buttons, one of which is lit up while the other three are darkened, and where clicking/tapping on one of the unlit buttons lights it up while darkening the previously-lit button. In regular HTML I would simply use a radio-group of <input type="radio"> elements, but that doesn't seem to work in SVG.
The buttons don't have to do anything besides lighten/darken (there's no action to perform or form to submit). This is purely a decorative image, I just want to jazz it up with some interactivity.
Is this at all possible to achieve inside a self-contained SVG file? I know you can include JavaScript in SVGs, but I'm not super familiar with JS so I'm not sure if that's the way to go or if there's a better option.
SVG does not have buttons or input elements. Here is an example of how you can switch between "buttons" by adding and/or removing a class name.
document.getElementById('tabs').addEventListener('click', e => {
let svg = e.target.closest('svg');
let btn = e.target.closest('.btn');
if(btn){
[...svg.querySelectorAll('.btn')].forEach(btn => btn.classList.remove('on'));
btn.classList.add('on');
console.log(btn.id, 'was clicked');
}
});
.btn {
fill: PeachPuff;
cursor: pointer;
}
.btn.on {
fill: orange;
}
<svg id="tabs" xmlns="http//www.w3.org/2000/svg" width="400" viewBox="0 0 30 10">
<rect id="btn1" class="btn" width="9" height="5" rx="1" />
<rect id="btn2" class="btn" width="9" height="5" x="10" rx="1" />
<rect id="btn3" class="btn" width="9" height="5" x="20" rx="1" />
</svg>
I have searched through the net and have come to discover that images are made clickable when they are converted to SVG format, however I am still not sure how to do this.
the image below for example, I need every box to be clickable, how do you go about doing this and is there any app that can help me, thank you in advance
enter image description here
You could do this with an SVG. But you would probably find it much easier to do with an HTML image map.
If you're able to edit the SVG itself you can wrap each element with an anchor tag.
<svg>
<a href="www.link1.com">
<rect x="10" y="10" width="60" height="50" fill="#ddd">
</a>
<a href="www.link2.com">
<rect x="75" y="10" width="60" height="50" fill="#ddd">
</a>
</svg>
Otherwise you can use Javascript to add a click handler to each element.
document.getElementById("rect1").addEventListener("click", function() {
window.open('www.link1.com')
});
document.getElementById("rect2").addEventListener("click", function() {
window.open('www.link2.com')
});
<svg>
<rect id="rect1" x="10" y="10" width="60" height="50" fill="#ddd"/>
<rect id="rect2" x="75" y="10" width="60" height="50" fill="#ddd"/>
</svg>
I have clipped an svg image by rect, but now onclick on that clipped portion how to trigger an onclick event on the rect and not the image.
Here is my code:
http://jsfiddle.net/dnuboz21/
<div class="feature">
<img src="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg">
<svg class="glass">
<image id="svg-image" width="980" height="652" xlink:href="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg" clip-path="url(#svg-mask)" />
<filter id="svg-blur">
<feGaussianBlur stdDeviation="15" />
</filter>
<clipPath id="svg-mask">
<rect x="325" y="110" rx="40" ry="40" width="150" height="150" style="fill:none;stroke:red;stroke-width:5;opacity:0.7"/>
</clipPath>
</svg>
</div>
I have a svg and I can draw multiple shapes on this svg. Now my requirement is I want to listen keyboard events like ctrl+C, ctrl+V, ctrl+D, Esc, Delete so that I can copy, paste , duplicate selected shape. But I have no idea about listening keyboard events on SVG . I tried following code but no luck !!
mySVG.on("keydown", function () {
//code to handle keydown
});
Any help ? Thanks in advance.
Because SVG is not an input-type, listen for the event on the window instead:
$(window).on('keypress', function (evt){ ... })
Add tabindex="0" attribute to the <svg> and it will work:
const svgElement = document.querySelector('svg');
svgElement.addEventListener('keydown', event => {
console.log('svg keydown: ', event.key);
});
<svg tabindex="0" width="300" height="200">
<rect width="100%" height="100%" fill="#555" />
<text x="50%" y="50%" font-size="20" text-anchor="middle" fill="white">
Click me and start typing
</text>
</svg>
The tabindex attribute allows you to control whether an element is
focusable, and ...
See MDN docs for more info.
I am applying a custom font to a text field this is working fine in my Openlaszlo 3.3 but in the newer version(5.0) the font is getting applied and the style is also getting applied , but i see the space between the letters is more. But this is not happening in the older version.
I inspected the object in both the versions and i found that the only notable difference is the line height.
Any idea why this is happening?How to remove those spaces is it possible?
3.3 Screenshot
5.0 Screenshot
The effect you are seeing is connected to the way how Flash deals with embedded TTF fonts: Text using those fonts is completely rendered by the Flash Player. Especially the change from Flash Player 8 to 9 brought many improvement for text rendering (better anti-aliasing for embedded fonts, finally the ability to modify the letter).
The difference in rendering text you are seeing is probably caused by the better anti-aliasing in Flash Player 9 and higher. OpenLaszlo SWF9+ text and inputtext components use the setting flash.text.AntiAliasType.ADVANCED as default.
Here's a discussion in the OpenLaszlo dev mailing list mentioning the effect your are seeing:
Font rendering should be as high-quality as possible -- I don't think
anyone's going to want old-style rendering in FP9. Isn't there another way
to fix this bug?
We're not going to get complete font rendering consistency across
runtimes. It's already not consistent when using device fonts. Each
browser/player/OS variation is different, and Flash vs. DHTML is also
different.
As far I know there is not an official API for modifying that setting. I've created a small application where you can test how modifying that property affects text rendering. The top two text items use the default font for Flash Player, therefore the anti-aliasing setting does not affect the rendering. The following 4 text items all use an embedded TTF font, and you can see the difference depending on the antiAliasingType setting.
To compile the application, download the following fonts and put them into the application folder:
http://svn.openlaszlo.org/openlaszlo/trunk/laszlo-explorer/fonts/ariosob.ttf
https://github.com/w0ng/googlefontdirectory/raw/master/fonts/Amaranth-Regular.ttf
<canvas height="600">
<font name="amaranth" style="plain" src="Amaranth-Regular.ttf" />
<font name="arioso" src="ariosob.ttf" />
<class name="mytext" extends="text">
<passthrough when="$as3">
import flash.text.AntiAliasType;
</passthrough>
<attribute name="antialias" type="string" value="advanced" />
<handler name="oninit">
this.onantialias.sendEvent();
</handler>
<handler name="onantialias">
var t = this.getDisplayObject().textfield;
if ( this.antialias == 'normal' ) {
t.antiAliasType = flash.text.AntiAliasType.NORMAL;
} else {
t.antiAliasType = flash.text.AntiAliasType.ADVANCED;
}
</handler>
<method name="toogleAntialias">
if ( this.antialias == 'normal' ) this.setAttribute( 'antialias', 'advanced' );
else this.setAttribute( 'antialias', 'normal' );
</method>
</class>
<view>
<simplelayout axis="y" spacing="10" />
<view layout="axis:x; spacing:5">
<text valign="middle">Anti-alias advanced</text>
<checkbox value="true" y="10"
onvalue="if (parent.t) parent.t.toogleAntialias()" />
<view width="20" height="1" />
<mytext name="t"
antialias="advanced"
fontsize="25">Default font (no embedded TTF)</mytext>
</view>
<view layout="axis:x; spacing:5">
<text valign="middle">Anti-alias advanced</text>
<checkbox value="false" y="10"
onvalue="if (parent.t) parent.t.toogleAntialias()" />
<view width="20" height="1" />
<mytext name="t"
antialias="normal"
fontsize="25">Default font (no embedded TTF)</mytext>
</view>
<view layout="axis:x; spacing:5">
<text valign="middle">Anti-alias advanced</text>
<checkbox value="true" y="10"
onvalue="if (parent.t) parent.t.toogleAntialias()" />
<view width="20" height="1" />
<mytext name="t"
antialias="advanced"
font="amaranth" fontsize="25">Amaranth Regular</mytext>
</view>
<view layout="axis:x; spacing:5">
<text valign="middle">Anti-alias advanced</text>
<checkbox value="false" y="10"
onvalue="if (parent.t) parent.t.toogleAntialias()" />
<view width="20" height="1" />
<mytext name="t"
antialias="normal"
font="amaranth" fontsize="25">Amaranth Regular</mytext>
</view>
<view layout="axis:x; spacing:5">
<text valign="middle">Anti-alias advanced</text>
<checkbox value="true" y="10"
onvalue="if (parent.t) parent.t.toogleAntialias()" />
<view width="20" height="1" />
<mytext name="t"
antialias="advanced"
font="arioso" fontsize="25">Amaranth Regular</mytext>
</view>
<view layout="axis:x; spacing:5">
<text valign="middle">Anti-alias advanced</text>
<checkbox value="false" y="10"
onvalue="if (parent.t) parent.t.toogleAntialias()" />
<view width="20" height="1" />
<mytext name="t"
antialias="normal"
font="arioso" fontsize="25">Amaranth Regular</mytext>
</view>
</view>
</canvas>
The results might not be consistent across all operating systems, since operating systems will use different approaches to optimizing text rendering. The above screenshot was taken on Linux.