SVG ins WEB
Verfasst: 14.05.2019 09:30
Hallo Leute,
wollte das Starfield ins Programm integrieren, funzt jedoch nicht!
Mit der HTML funzt die Sache:
Jemanden einen Tip?
Gruss ... Velindos!
wollte das Starfield ins Programm integrieren, funzt jedoch nicht!
Code: Alles auswählen
Global Present_Web
Procedure.s PLUGIN_Starfield(GGadget)
Protected Starfield.s = ""
; -----------------------
Starfield +"<svg"
Starfield +" xmlns='http://www.w3.org/2000/svg' "
Starfield +" xmlns:xlink='http://www.w3.org/1999/xlink'"
Starfield +" version='1.1'"
Starfield +" width='" + GadgetX(Present_Web)+"'"
Starfield +" height='"+GadgetY(Present_Web)+"'"
Starfield +" onload='init(evt)'>"
Starfield +" <script type='text/ecmascript'>"
Starfield +" <![CDATA["
Starfield +" var svgDocument;"
Starfield +" var svgNS = 'http://www.w3.org/2000/svg';"
Starfield +" var xlinkNS = 'http://www.w3.org/1999/xlink';"
Starfield +" "
Starfield +" var centerX;"
Starfield +" var centerY;"
Starfield +" var angles = [];"
Starfield +" var distances = [];"
Starfield +" var maxD = 1000;"
Starfield +" var nStars = 32;"
Starfield +" "
Starfield +" function init(evt) {"
Starfield +" If ( window.svgDocument == null ) {"
Starfield +" svgDocument = evt.target.ownerDocument;"
Starfield +" }"
Starfield +" "
Starfield +" centerX = svgDocument.childNodes[0].getAttributeNS(null, 'width')/2;"
Starfield +" centerY = svgDocument.childNodes[0].getAttributeNS(null, 'height')/2;"
Starfield +" maxD = Math.sqrt(centerX * centerX + centerY * centerY) + 40;"
Starfield +""
Starfield +" createStars(nStars);"
Starfield +" beginAnimation();"
Starfield +" }"
Starfield +" "
Starfield +" function createStars(n) {"
Starfield +" For (var i=1; i<=n; i++) {"
Starfield +" var star = document.createElementNS(svgNS, 'use');"
Starfield +" star.setAttributeNS(null, 'id', 'star' + i); "
Starfield +" star.setAttributeNS(xlinkNS, 'href', '#star'); "
Starfield +" document.getElementById('star-group').appendChild(star);"
Starfield +" angles.push(Math.PI * 2 * Math.random());"
Starfield +" distances.push(maxD * Math.random());"
Starfield +" }"
Starfield +" }"
Starfield +" "
Starfield +" function drawField() {"
Starfield +" For (var i=0; i<nStars; i++) {"
Starfield +" var star = svgDocument.getElementById('star' + (i+1));"
Starfield +" var d = distances[i];"
Starfield +" var x = centerX + d * Math.sin(angles[i]);"
Starfield +" var y = centerY + d * Math.cos(angles[i]);"
Starfield +" var scale = 2*(1 - (maxD / (d+maxD)));"
Starfield +" "
Starfield +" star.setAttributeNS(null, 'transform', 'translate(' + x + ',' + y + ') scale(' + scale*scale + ')');"
Starfield +" }"
Starfield +" }"
Starfield +" "
Starfield +" function updateImage() {"
Starfield +" For (var i=0; i<nStars; i++) {"
Starfield +" distances[i]++;"
Starfield +" If (distances[i] > maxD) {"
Starfield +" distances[i] = 0;"
Starfield +" }"
Starfield +" }"
Starfield +" drawField();"
Starfield +" }"
Starfield +" "
Starfield +" function beginAnimation() {"
Starfield +" var timeout = setInterval(updateImage, 10);"
Starfield +" }"
Starfield +" "
Starfield +" ]]>"
Starfield +" </script>"
Starfield +" "
Starfield +" <defs>"
Starfield +" <path id='star' fill='#ee2' d='M-4 -17.2L-8.7 -3.6 -23.1 -3.3 -11.6 5.4 -15.8 19.2 -4 11 7.9 19.2 3.7 5.4 15.2 -3.3 0.8 -3.6z'/>"
Starfield +" </defs>"
Starfield +" "
Starfield +" <rect width='"+GadgetX(Present_Web)+"' height='"+GadgetY(Present_Web)+"' fill='#228' />"
Starfield +" <g id='star-group'></g>"
Starfield +" "
Starfield +" </svg>"
; -----------------------
ProcedureReturn Starfield
; -----------------------
EndProcedure
If OpenWindow(0, 0, 0, 600, 300, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
; Funzt nicht
; Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, PLUGIN_Starfield(GGadget))
; Funzt nicht
Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, "")
SetGadgetItemText(Present_Web, #PB_Web_HtmlCode, PLUGIN_Starfield(GGadget))
; Funzt nicht ganz
; Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, "")
; SetGadgetItemText(Present_Web, #PB_Web_HtmlCode, PeekS(?Starfield_Quad_1920,-1,#PB_Ascii))
Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf
;{ PAGES
;- [HTML] Pages
DataSection
Starfield_Quad_1920:
IncludeBinary "D:\[Pure@API]\[STORE]\PLUGIN\Starfield_Quad_1920.svg": Data.b 0
EndDataSection
;}
Code: Alles auswählen
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1920"
height="929"
onload="init(evt)">
<script type="text/ecmascript">
<![CDATA[
var svgDocument;
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var centerX;
var centerY;
var angles = [];
var distances = [];
var maxD = 1000;
var nStars = 32;
function init(evt) {
If ( window.svgDocument == null ) {
svgDocument = evt.target.ownerDocument;
}
centerX = svgDocument.childNodes[0].getAttributeNS(null, 'width')/2;
centerY = svgDocument.childNodes[0].getAttributeNS(null, 'height')/2;
maxD = Math.sqrt(centerX * centerX + centerY * centerY) + 40;
createStars(nStars);
beginAnimation();
}
function createStars(n) {
For (var i=1; i<=n; i++) {
var star = document.createElementNS(svgNS, "use");
star.setAttributeNS(null, "id", "star" + i);
star.setAttributeNS(xlinkNS, "href", "#star");
document.getElementById("star-group").appendChild(star);
angles.push(Math.PI * 2 * Math.random());
distances.push(maxD * Math.random());
}
}
function drawField() {
For (var i=0; i<nStars; i++) {
var star = svgDocument.getElementById('star' + (i+1));
var d = distances[i];
var x = centerX + d * Math.sin(angles[i]);
var y = centerY + d * Math.cos(angles[i]);
var scale = 2*(1 - (maxD / (d+maxD)));
star.setAttributeNS(null, 'transform', 'translate(' + x + ',' + y + ') scale(' + scale*scale + ')');
}
}
function updateImage() {
For (var i=0; i<nStars; i++) {
distances[i]++;
If (distances[i] > maxD) {
distances[i] = 0;
}
}
drawField();
}
function beginAnimation() {
var timeout = setInterval(updateImage, 10);
}
]]>
</script>
<defs>
<path id="star" fill="#ee2" d="M-4 -17.2L-8.7 -3.6 -23.1 -3.3 -11.6 5.4 -15.8 19.2 -4 11 7.9 19.2 3.7 5.4 15.2 -3.3 0.8 -3.6z"/>
</defs>
<rect width="1920" height="929" fill="#228" />
<g id="star-group"></g>
</svg>
Gruss ... Velindos!
