From 2a515b2eb935026af6fc94f9ae0f744506c77d24 Mon Sep 17 00:00:00 2001 From: Pavel Talanov Date: Thu, 9 Feb 2012 19:03:10 +0400 Subject: [PATCH] working on examples --- .idea/artifacts/k2js_jar.xml | 3 - .idea/modules.xml | 1 + examplesForWebDemo/src/html5/demo/demo.html | 44 ++ .../src/html5/demo/demo_template.html | 51 ++ .../src/html5/demo/template.html | 13 + .../src/html5/interactive2/interactive2.js | 459 +++++++++++++++ .../src/html5/interactive2/jbLogo.png | Bin 0 -> 9327 bytes .../src/html5/interactive2/main.kt | 280 +++++++++ .../src/html5/interactive2/template.html | 15 + .../src/html5/interactive3/interactive2.js | 459 +++++++++++++++ .../src/html5/interactive3/interactive3.js | 529 ++++++++++++++++++ .../src/html5/interactive3/kotlinlogo.png | Bin 0 -> 6663 bytes .../src/html5/interactive3/main.kt | 318 +++++++++++ .../src/html5/interactive3/template.html | 15 + examplesForWebDemo/src/html5/test/test.kt | 2 +- examplesForWebDemo/src/html5/test/testhtml.js | 1 - jslib/src/html5/core.kt | 95 +++- 17 files changed, 2251 insertions(+), 34 deletions(-) create mode 100644 examplesForWebDemo/src/html5/demo/demo.html create mode 100644 examplesForWebDemo/src/html5/demo/demo_template.html create mode 100644 examplesForWebDemo/src/html5/demo/template.html create mode 100644 examplesForWebDemo/src/html5/interactive2/interactive2.js create mode 100644 examplesForWebDemo/src/html5/interactive2/jbLogo.png create mode 100644 examplesForWebDemo/src/html5/interactive2/main.kt create mode 100644 examplesForWebDemo/src/html5/interactive2/template.html create mode 100644 examplesForWebDemo/src/html5/interactive3/interactive2.js create mode 100644 examplesForWebDemo/src/html5/interactive3/interactive3.js create mode 100644 examplesForWebDemo/src/html5/interactive3/kotlinlogo.png create mode 100644 examplesForWebDemo/src/html5/interactive3/main.kt create mode 100644 examplesForWebDemo/src/html5/interactive3/template.html diff --git a/.idea/artifacts/k2js_jar.xml b/.idea/artifacts/k2js_jar.xml index eb3b4c0e9ab..a4f2e6c0057 100644 --- a/.idea/artifacts/k2js_jar.xml +++ b/.idea/artifacts/k2js_jar.xml @@ -6,14 +6,11 @@ - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml index d9a95e51532..07c88da7dbd 100644 --- a/.idea/modules.xml +++ b/.idea/modules.xml @@ -5,6 +5,7 @@ + diff --git a/examplesForWebDemo/src/html5/demo/demo.html b/examplesForWebDemo/src/html5/demo/demo.html new file mode 100644 index 00000000000..2f0dcf75fb5 --- /dev/null +++ b/examplesForWebDemo/src/html5/demo/demo.html @@ -0,0 +1,44 @@ + + + + + + \ No newline at end of file diff --git a/examplesForWebDemo/src/html5/demo/demo_template.html b/examplesForWebDemo/src/html5/demo/demo_template.html new file mode 100644 index 00000000000..cd8c8e5d6d3 --- /dev/null +++ b/examplesForWebDemo/src/html5/demo/demo_template.html @@ -0,0 +1,51 @@ + + + + Canvas demo + + + + + + + + \ No newline at end of file diff --git a/examplesForWebDemo/src/html5/demo/template.html b/examplesForWebDemo/src/html5/demo/template.html new file mode 100644 index 00000000000..861e4d81eec --- /dev/null +++ b/examplesForWebDemo/src/html5/demo/template.html @@ -0,0 +1,13 @@ + + + + Canvas demo + + + + + + + + \ No newline at end of file diff --git a/examplesForWebDemo/src/html5/interactive2/interactive2.js b/examplesForWebDemo/src/html5/interactive2/interactive2.js new file mode 100644 index 00000000000..442796dfb27 --- /dev/null +++ b/examplesForWebDemo/src/html5/interactive2/interactive2.js @@ -0,0 +1,459 @@ +{ + var classes = function () { + var Vector = Kotlin.Class.create({initialize:function (x, y) { + this.$x = x; + this.$y = y; + }, get_x:function () { + return this.$x; + }, get_y:function () { + return this.$y; + }, plus:function (v) { + { + return interactive2.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y()); + } + }, minus:function () { + { + return interactive2.v_0(-this.get_x(), -this.get_y()); + } + }, minus$0:function (v) { + { + return interactive2.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y()); + } + }, times:function (coef) { + { + return interactive2.v_0(this.get_x() * coef, this.get_y() * coef); + } + }, distanceTo:function (v) { + { + return Math.sqrt(this.minus$0(v).get_sqr()); + } + }, rotatedBy:function (theta) { + { + var sin = Math.sin(theta); + var cos = Math.cos(theta); + return interactive2.v_0(this.get_x() * cos - this.get_y() * sin, this.get_x() * sin + this.get_y() * cos); + } + }, isInRect:function (topLeft, size) { + { + return this.get_x() >= topLeft.get_x() && this.get_x() <= topLeft.get_x() + size.get_x() && this.get_y() >= topLeft.get_y() && this.get_y() <= topLeft.get_y() + size.get_y(); + } + }, get_sqr:function () { + { + return this.get_x() * this.get_x() + this.get_y() * this.get_y(); + } + }, get_normalized:function () { + { + return this.times(1 / Math.sqrt(this.get_sqr())); + } + } + }); + var RadialGradientGenerator = Kotlin.Class.create({initialize:function (context) { + this.$context = context; + this.$gradients = new Kotlin.ArrayList; + this.$current = 0; + { + this.newColorStops([ + [0, '#F59898'], + [0.5, '#F57373'], + [1, '#DB6B6B'] + ]); + this.newColorStops([ + [0.39, 'rgb(140,167,209)'], + [0.7, 'rgb(104,139,209)'], + [0.85, 'rgb(67,122,217)'] + ]); + this.newColorStops([ + [0, 'rgb(255,222,255)'], + [0.5, 'rgb(255,185,222)'], + [1, 'rgb(230,154,185)'] + ]); + this.newColorStops([ + [0, 'rgb(255,209,114)'], + [0.5, 'rgb(255,174,81)'], + [1, 'rgb(241,145,54)'] + ]); + this.newColorStops([ + [0, 'rgb(132,240,135)'], + [0.5, 'rgb(91,240,96)'], + [1, 'rgb(27,245,41)'] + ]); + this.newColorStops([ + [0, 'rgb(250,147,250)'], + [0.5, 'rgb(255,80,255)'], + [1, 'rgb(250,0,217)'] + ]); + } + }, get_context:function () { + return this.$context; + }, get_gradients:function () { + return this.$gradients; + }, get_current:function () { + return this.$current; + }, set_current:function (tmp$0) { + this.$current = tmp$0; + }, newColorStops:function (colorStops) { + { + this.get_gradients().add(colorStops); + } + }, getNext:function () { + { + var result = this.get_gradients().get(this.get_current()); + this.set_current((this.get_current() + 1) % this.get_gradients().size()); + return result; + } + } + }); + var CanvasState = Kotlin.Class.create({initialize:function (canvas) { + this.$canvas = canvas; + this.$width = this.get_canvas().width; + this.$height = this.get_canvas().height; + this.$context = getContext(); + this.$valid = false; + this.$shapes = new Kotlin.ArrayList; + this.$selection = null; + this.$dragOff = new interactive2.Vector_0(0, 0); + this.$interval = 1000 / 30; + { + var tmp$4; + var tmp$3; + var tmp$2; + var tmp$1; + var tmp$0_0; + $(this.get_canvas()).mousedown((tmp$0_0 = this , function (it) { + { + var tmp$0; + tmp$0_0.set_valid(false); + tmp$0_0.set_selection(null); + var mousePos = tmp$0_0.mousePos_0(it); + { + tmp$0 = tmp$0_0.get_shapes().iterator(); + while (tmp$0.hasNext()) { + var shape = tmp$0.next(); + { + if (shape.contains(mousePos)) { + tmp$0_0.set_dragOff(mousePos.minus$0(shape.get_pos())); + shape.set_selected(true); + tmp$0_0.set_selection(shape); + break; + } + } + } + } + } + } + )); + $(this.get_canvas()).mousemove((tmp$1 = this , function (it) { + { + if (tmp$1.get_selection() != null) { + Kotlin.sure(tmp$1.get_selection()).set_pos(tmp$1.mousePos_0(it).minus$0(tmp$1.get_dragOff())); + tmp$1.set_valid(false); + } + } + } + )); + $(this.get_canvas()).mouseup((tmp$2 = this , function (it) { + { + if (tmp$2.get_selection() != null) { + Kotlin.sure(tmp$2.get_selection()).set_selected(false); + } + tmp$2.set_selection(null); + tmp$2.set_valid(false); + } + } + )); + $(this.get_canvas()).dblclick((tmp$3 = this , function (it) { + { + var redTransparentCircle = new interactive2.Creature_0(tmp$3.mousePos_0(it), tmp$3); + tmp$3.addShape(redTransparentCircle); + tmp$3.set_valid(false); + } + } + )); + interactive2.doWithPeriod(this.get_interval(), (tmp$4 = this , function () { + { + tmp$4.draw(); + } + } + )); + } + }, get_canvas:function () { + return this.$canvas; + }, get_width:function () { + return this.$width; + }, get_height:function () { + return this.$height; + }, get_context:function () { + return this.$context; + }, get_valid:function () { + return this.$valid; + }, set_valid:function (tmp$0) { + this.$valid = tmp$0; + }, get_shapes:function () { + return this.$shapes; + }, set_shapes:function (tmp$0) { + this.$shapes = tmp$0; + }, get_selection:function () { + return this.$selection; + }, set_selection:function (tmp$0) { + this.$selection = tmp$0; + }, get_dragOff:function () { + return this.$dragOff; + }, set_dragOff:function (tmp$0) { + this.$dragOff = tmp$0; + }, get_interval:function () { + return this.$interval; + }, mousePos_0:function (e) { + { + var offset = new interactive2.Vector_0(0, 0); + var element = this.get_canvas(); + while (element != null) { + var el = Kotlin.sure(element); + offset = offset.plus(new interactive2.Vector_0(el.offsetLeft, el.offsetTop)); + element = el.offsetParent; + } + return (new interactive2.Vector_0(e.pageX, e.pageY)).minus$0(offset); + } + }, addShape:function (shape) { + { + this.get_shapes().add(shape); + this.set_valid(false); + } + }, clear:function () { + { + this.get_context().fillStyle = '#FFFFFF'; + this.get_context().fillRect(0, 0, this.get_width(), this.get_height()); + this.get_context().strokeStyle = '#000000'; + this.get_context().lineWidth = 4; + this.get_context().strokeRect(0, 0, this.get_width(), this.get_height()); + } + }, draw:function () { + { + var tmp$0; + if (this.get_valid()) + return; + this.clear(); + { + tmp$0 = this.get_shapes().iterator(); + while (tmp$0.hasNext()) { + var shape = tmp$0.next(); + { + shape.draw(this); + } + } + } + this.set_valid(true); + } + } + }); + var Shape = Kotlin.Class.create({initialize:function () { + this.$selected = false; + }, draw:function (state) { + }, contains:function (mousePos) { + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_selected:function () { + return this.$selected; + }, set_selected:function (tmp$0) { + this.$selected = tmp$0; + } + }); + var Creature = Kotlin.Class.create(Shape, {initialize:function (pos, state) { + this.$pos = pos; + this.$state = state; + this.super_init(); + this.$shadowOffset = interactive2.v_0(-5, 5); + this.$colorStops = interactive2.get_gradientGenerator().getNext(); + this.$relSize = 0.05; + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_state:function () { + return this.$state; + }, set_state:function (tmp$0) { + this.$state = tmp$0; + }, get_shadowOffset:function () { + return this.$shadowOffset; + }, get_colorStops:function () { + return this.$colorStops; + }, get_relSize:function () { + return this.$relSize; + }, get_radius:function () { + { + return this.get_state().get_width() * this.get_relSize(); + } + }, get_position:function () { + var tmp$0; + if (this.get_selected()) + tmp$0 = this.get_pos().minus$0(this.get_shadowOffset()); + else + tmp$0 = this.get_pos(); + { + return tmp$0; + } + }, get_directionToLogo:function () { + { + return interactive2.get_JB().get_centre().minus$0(this.get_position()).get_normalized(); + } + }, contains:function (mousePos) { + { + return this.get_pos().distanceTo(mousePos) < this.get_radius(); + } + }, fillCircle:function (receiver, position, rad) { + { + receiver.beginPath(); + receiver.arc(position.get_x(), position.get_y(), rad, 0, 2 * Math.PI, false); + receiver.closePath(); + receiver.fill(); + } + }, draw:function (state) { + { + var context = state.get_context(); + if (!this.get_selected()) { + this.drawCreature(context); + } + else { + this.drawCreatureWithShadow(context); + } + } + }, drawCreature:function (context) { + { + context.fillStyle = this.getGradient(context); + this.fillCircle(context, this.get_position(), this.get_radius()); + this.drawEye(context); + this.drawTail(context); + } + }, getGradient:function (context) { + { + var tmp$0; + var gradientCentre = this.get_position().plus(this.get_directionToLogo().times(this.get_radius() / 4)); + var gradient = context.createRadialGradient(gradientCentre.get_x(), gradientCentre.get_y(), 1, gradientCentre.get_x(), gradientCentre.get_y(), 2 * this.get_radius()); + { + tmp$0 = Kotlin.arrayIterator(this.get_colorStops()); + while (tmp$0.hasNext()) { + var colorStop = tmp$0.next(); + { + gradient.addColorStop(colorStop[0], colorStop[1]); + } + } + } + return gradient; + } + }, drawTail:function (context) { + { + var tailDirection = this.get_directionToLogo().minus(); + var tailPos = this.get_position().plus(tailDirection.times(this.get_radius()).times(0.7)); + var tailSize = this.get_radius() * 1.6; + var angle = Math.PI / 6; + var p1 = tailPos.plus(tailDirection.rotatedBy(angle).times(tailSize)); + var p2 = tailPos.plus(tailDirection.rotatedBy(-angle).times(tailSize)); + context.fillStyle = this.getGradient(context); + context.beginPath(); + context.moveTo(tailPos.get_x(), tailPos.get_y()); + context.lineTo(p1.get_x(), p1.get_y()); + var middlePoint = this.get_position().plus(tailDirection.times(this.get_radius()).times(1)); + context.quadraticCurveTo(middlePoint.get_x(), middlePoint.get_y(), p2.get_x(), p2.get_y()); + context.lineTo(tailPos.get_x(), tailPos.get_y()); + context.closePath(); + context.fill(); + } + }, drawEye:function (context) { + { + var eyePos = this.get_directionToLogo().times(this.get_radius()).times(0.6).plus(this.get_position()); + var eyeRadius = this.get_radius() / 3; + var eyeLidRadius = eyeRadius / 2; + context.fillStyle = '#FFFFFF'; + this.fillCircle(context, eyePos, eyeRadius); + context.fillStyle = '#000000'; + this.fillCircle(context, eyePos, eyeLidRadius); + } + }, drawCreatureWithShadow:function (context) { + { + context.save(); + this.setShadow(context); + context.fillStyle = this.getGradient(context); + this.fillCircle(context, this.get_position(), this.get_radius()); + context.restore(); + this.drawEye(context); + this.drawTail(context); + } + }, setShadow:function (context) { + { + context.shadowColor = 'rgba(100, 100, 100, 0.7)'; + context.shadowBlur = 5; + context.shadowOffsetX = this.get_shadowOffset().get_x(); + context.shadowOffsetY = this.get_shadowOffset().get_y(); + } + } + }); + var Logo = Kotlin.Class.create(Shape, {initialize:function (pos, relSize) { + this.$pos = pos; + this.$relSize = relSize; + this.super_init(); + this.$imageSize = interactive2.v_0(704, 254); + this.$canvasSize = this.get_imageSize().times(this.get_relSize()); + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_relSize:function () { + return this.$relSize; + }, set_relSize:function (tmp$0) { + this.$relSize = tmp$0; + }, get_imageSize:function () { + return this.$imageSize; + }, get_canvasSize:function () { + return this.$canvasSize; + }, draw:function (state) { + { + var context = state.get_context(); + context.drawImage(getJBLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_pos().get_x(), this.get_pos().get_y(), this.get_canvasSize().get_x(), this.get_canvasSize().get_y()); + } + }, contains:function (mousePos) { + { + return mousePos.isInRect(this.get_pos(), this.get_canvasSize()); + } + }, get_centre:function () { + { + return this.get_pos().plus(this.get_canvasSize().times(0.5)); + } + } + }); + return {Shape_0:Shape, Logo_0:Logo, Creature_0:Creature, RadialGradientGenerator_0:RadialGradientGenerator, CanvasState_0:CanvasState, Vector_0:Vector}; + } + (); + var interactive2 = Kotlin.Namespace.create({initialize:function () { + interactive2.$gradientGenerator = new interactive2.RadialGradientGenerator_0(getContext()); + interactive2.$JB = new interactive2.Logo_0(interactive2.v_0(20, 20), 0.3); + }, get_gradientGenerator:function () { + return interactive2.$gradientGenerator; + }, get_JB:function () { + return interactive2.$JB; + }, doWithPeriod:function (period, f) { + { + setInterval(f, period); + } + }, v_0:function (x, y) { + { + return new interactive2.Vector_0(x, y); + } + }, main:function () { + { + var state = new interactive2.CanvasState_0(getCanvas()); + state.addShape(interactive2.get_JB()); + setTimeout(function () { + { + state.set_valid(false); + } + } + ); + } + } + }, classes); + interactive2.initialize(); +} + +var args = []; +interactive2.main(args); diff --git a/examplesForWebDemo/src/html5/interactive2/jbLogo.png b/examplesForWebDemo/src/html5/interactive2/jbLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..759aa8ae05a7237bb1793cfb1706f127556b0041 GIT binary patch literal 9327 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�?7QP2QYFfM|yoVITZ(RHUSx5R%X>vYGFUvpe%aq zJyMA*z8;>W*a`u(RunJVvBE|e%B~t$iY7r`m!|%-yQ?Co?MlcN2sA&K{fYj=a(wof^Ha%hXC+zT8r-a`H^)D6SIRU>sstYL!` zdWt7}`qzGW{b5yF7nxCSc$h0PdP@ndsDD7^Qc~#P^++=QYm7)C-2q`~(JMvmY0A)Q zhqIQufS$|!6CeC{5m%T6n_cOB3;I2&_0#m_K8h4|pPHmr>E(nFr!{x`x5WpyRgGq9 zaZ4O>FH4x$c+70L+N1+YC{f*Mvc>yX$f&Lx-={GQI)tf2h0BN`JzYCfjn6R2niMXx zS@$be`i{vb7y8+fnauTA|?t({p_d%9sl7l04DikFc@U<;+*7^pE@B2;{ zPqfrWQ~9M?yMFS9ZMk~klD5xjrLRdjOt6!8Um7F$AB!Y}mK+7So2zfUj;m52l*`sZ zT1pyd2S$Wi3`VjB_QEZ0x@RZ3I#Iy_de2M~i7fo$ZypANj98wxBPWgH?^);K1>f2UuY=mi3!3~>yj>H7Z7;+b#=4^SzUmStogIwnf z@3Z%3W~F=e4DLn+v?K|^z2GSZHQv3mT~XAy;cL*5;e*ss<$Fz%dg_t66Nxp~U4Nk; zD1U0osh(t;+?_Mw)IrB+zE>|=cG8V6@iT_Eg~JC~>o46bI8&VOOAf@Gh7MEkGI(xC z736;8%X(#XDwJ_^Y>w<|&oVUOt9jc8eaGE1uuoHT-HCl?we4=ep~LB+zmJ|MaK87K zPnfmydTQ)eL*0(FAFbX$3$ws8_v8n!^g^EedX+CY;Y2Y%?m49Uio(v|4zPAaY&nw= zXb4B(kH3~9lY;=Zg+@Zi?(5XBhAwZWwJ*O*blg(C`{HW3@3TUQl*8l4!yMvM3BO1m z@GpV-3`g|;T1-&MKke#c58vs*8k}?29mhQgV8>rC`dYF$AvT6itq`=X7{&bx>+Z~v zC|$aeTl!Tg{9Rc^*vV)v*Z7sALq>u6F&T zwo4J_^;fE@6=C~YlN5JRm<8A4Y$cSijhG~2@qfs}jN3j!Nb;UGGe#WfjCslw00t7s zqY5;%En$zUMI7 zees#ut0HPUB7Z=^^UsfYDz|Da_3w5gJU&be|EOAOzwf)$FTABNh-zlX#{9aHOlVwO zGiYR*zuFQOFrqEB1muA8b^`As5DVZGY1(cIsgvUy$$W3bRU!Ts$rZn%*Fm}i0U8d~ z*q@DGt%kv&utAkx{eUz1|8VmjVojGC#|`;}c*IT&?%!X`RJF>jLXimN*-KIhpre_a V?{5ee#9s~qv^DhAtM4Ks{s*lVCNKa1 literal 0 HcmV?d00001 diff --git a/examplesForWebDemo/src/html5/interactive2/main.kt b/examplesForWebDemo/src/html5/interactive2/main.kt new file mode 100644 index 00000000000..4f21e9eb66b --- /dev/null +++ b/examplesForWebDemo/src/html5/interactive2/main.kt @@ -0,0 +1,280 @@ +package interactive2; + +import jquery.*; +import html5.*; +import java.util.ArrayList; +import js.*; +import js.Math; +import js.setInterval +import html5.getCanvas +import html5.getJBLogo +import jquery.jq +import js.setTimeout + +val gradientGenerator = RadialGradientGenerator(getContext()) +val JB = Logo(v(20.0, 20.0)) + +fun doWithPeriod(period : Int, f : ()->Unit) { + setInterval(f, period); +} + +abstract class Shape() { + abstract fun draw(state : CanvasState); + abstract fun contains(mousePos : Vector) : Boolean; + abstract var pos : Vector; + var selected : Boolean = false; +} + +class Logo(override var pos : Vector, + var relSize : Double = 0.3) + : Shape() +{ + val imageSize = v(704.0, 254.0) + val canvasSize = imageSize * relSize + + override fun draw(state : CanvasState) { + val context = state.context; + context.drawImage(getJBLogo(), 0.0, 0.0, imageSize.x, imageSize.y, pos.x, pos.y, canvasSize.x, canvasSize.y) + } + + override fun contains(mousePos: Vector): Boolean = mousePos.isInRect(pos, canvasSize) + + val centre : Vector + get() = pos + canvasSize * 0.5 +} + +class Creature(override var pos : Vector, + var state : CanvasState) : Shape() { + + val shadowOffset = v(-5.0, 5.0) + val colorStops = gradientGenerator.getNext() + val relSize = 0.05; + val radius : Double + get() = state.width * relSize; + + val position : Vector + get() = if (selected) pos - shadowOffset else pos + + val directionToLogo : Vector + get() = (JB.centre - position).normalized + + override fun contains(mousePos : Vector) = pos.distanceTo(mousePos) < radius; + + fun Context.fillCircle(position : Vector, rad : Double) { + beginPath(); + arc(position.x, position.y, rad, 0.0, 2 * Math.PI, false); + closePath(); + fill() + } + + override fun draw(state : CanvasState) { + val context = state.context; + if (!selected) { + drawCreature(context) + } else { + drawCreatureWithShadow(context) + } + } + + fun drawCreature(context : Context) { + context.fillStyle = getGradient(context); + context.fillCircle(position, radius) + drawEye(context) + drawTail(context) + } + + fun getGradient(context : Context) : CanvasGradient { + val gradientCentre = position + directionToLogo * (radius / 4) + val gradient = context.createRadialGradient(gradientCentre.x, gradientCentre.y, 1.0, gradientCentre.x, gradientCentre.y, 2 * radius) + for (colorStop in colorStops) { + gradient.addColorStop(colorStop._1, colorStop._2) + } + return gradient; + } + + fun drawTail(context : Context) { + val tailDirection = -directionToLogo; + val tailPos = position + tailDirection * radius * 0.7 + val tailSize = radius * 1.6 + val angle = Math.PI / 6.0; + val p1 = tailPos + tailDirection.rotatedBy(angle) * tailSize + val p2 = tailPos + tailDirection.rotatedBy(-angle) * tailSize + context.fillStyle = getGradient(context) + context.beginPath() + context.moveTo(tailPos.x, tailPos.y) + context.lineTo(p1.x, p1.y) + val middlePoint = position + tailDirection * radius * 1.0 + context.quadraticCurveTo(middlePoint.x, middlePoint.y, p2.x, p2.y) + context.lineTo(tailPos.x, tailPos.y) + context.closePath() + context.fill() + } + + fun drawEye(context : Context) {; + val eyePos = directionToLogo * radius * 0.6 + position; + val eyeRadius = radius / 3; + val eyeLidRadius = eyeRadius / 2; + context.fillStyle = "#FFFFFF"; + context.fillCircle(eyePos, eyeRadius) + context.fillStyle = "#000000" + context.fillCircle(eyePos, eyeLidRadius) + } + + fun drawCreatureWithShadow(context : Context) { + context.save() + setShadow(context) + context.fillStyle = getGradient(context) + context.fillCircle(position, radius) + context.restore(); + drawEye(context) + drawTail(context) + } + + fun setShadow(context : Context) { + context.shadowColor = "rgba(100, 100, 100, 0.7)"; + context.shadowBlur = 5.0; + context.shadowOffsetX = shadowOffset.x; + context.shadowOffsetY = shadowOffset.y; + } +} + +class CanvasState(val canvas : Canvas) { + val width = canvas.width; + val height = canvas.height; + val context = getContext(); + var valid = false; + var shapes = ArrayList(); + var selection : Shape? = null; + var dragOff = Vector(); + val interval = 1000 / 30; + + { + jq(canvas).mousedown { + valid = false; + selection = null; + val mousePos = mousePos(it); + for (shape in shapes) { + if (mousePos in shape) { + dragOff = mousePos - shape.pos; + shape.selected = true; + selection = shape; + break; + } + } + } + + jq(canvas).mousemove { + if (selection != null) { + selection.sure().pos = mousePos(it) - dragOff; + valid = false; + } + } + + jq(canvas).mouseup { + if (selection != null) { + selection.sure().selected = false; + } + selection = null; + valid = false; + } + + jq(canvas).dblclick { + val redTransparentCircle = Creature(mousePos(it), this @CanvasState); + addShape(redTransparentCircle); + valid = false; + } + + doWithPeriod(interval) { + draw(); + } + } + + fun mousePos(e : MouseEvent) : Vector { + var offset = Vector(); + var element : DomElement? = canvas; + while (element != null) { + val el : DomElement = element.sure(); + offset += Vector(el.offsetLeft, el.offsetTop); + element = el.offsetParent; + } + return Vector(e.pageX, e.pageY) - offset; + } + + fun addShape(shape : Shape) { + shapes.add(shape); + valid = false; + } + + fun clear() { + context.fillStyle = "#FFFFFF" + context.fillRect(0.0, 0.0, width, height) + context.strokeStyle = "#000000" + context.lineWidth = 4.0; + context.strokeRect(0.0, 0.0, width, height) + } + + fun draw() { + if (valid) return + + clear(); + for (shape in shapes) { + shape.draw(this); + } + valid = true; + } +} + +class RadialGradientGenerator(val context : Context) { + val gradients = ArrayList>(); + var current = 0 + + fun newColorStops(vararg colorStops : #(Double, String)) { + gradients.add(colorStops) + } + + { + newColorStops(#(0.0, "#F59898"), #(0.5, "#F57373"), #(1.0, "#DB6B6B")) + newColorStops(#(0.39, "rgb(140,167,209)"), #(0.7, "rgb(104,139,209)"), #(0.85, "rgb(67,122,217)")) + newColorStops(#(0.0, "rgb(255,222,255)"), #(0.5, "rgb(255,185,222)"), #(1.0, "rgb(230,154,185)")) + newColorStops(#(0.0, "rgb(255,209,114)"), #(0.5, "rgb(255,174,81)"), #(1.0, "rgb(241,145,54)")) + newColorStops(#(0.0, "rgb(132,240,135)"), #(0.5, "rgb(91,240,96)"), #(1.0, "rgb(27,245,41)")) + newColorStops(#(0.0, "rgb(250,147,250)"), #(0.5, "rgb(255,80,255)"), #(1.0, "rgb(250,0,217)")) +} + + fun getNext() : Array<#(Double, String)> { + val result = gradients.get(current) + current = (current + 1) % gradients.size() + return result + } +} + +fun v(x : Double, y : Double) = Vector(x, y); + +class Vector(val x : Double = 0.0, val y : Double = 0.0) { + fun plus(v : Vector) = v(x + v.x, y + v.y); + fun minus() = v(-x, -y) + fun minus(v : Vector) = v(x - v.x, y - v.y) + fun times(coef : Double) = v(x * coef, y * coef) + fun distanceTo(v : Vector) = Math.sqrt((this - v).sqr) + fun rotatedBy(theta : Double) : Vector { + val sin = Math.sin(theta) + val cos = Math.cos(theta) + return v(x * cos - y * sin, x * sin + y * cos) + } + + fun isInRect(topLeft : Vector, size : Vector) = (x >= topLeft.x) && (x <= topLeft.x + size.x) && + (y >= topLeft.y) && (y <= topLeft.y + size.y) + + val sqr : Double + get() = x * x + y * y + val normalized : Vector + get() = this * (1.0 / Math.sqrt(sqr)) +} + +fun main() { + val state = CanvasState(getCanvas()); + state.addShape(JB); + setTimeout({ + state.valid = false + }) +} \ No newline at end of file diff --git a/examplesForWebDemo/src/html5/interactive2/template.html b/examplesForWebDemo/src/html5/interactive2/template.html new file mode 100644 index 00000000000..c1619f21c8a --- /dev/null +++ b/examplesForWebDemo/src/html5/interactive2/template.html @@ -0,0 +1,15 @@ + + + + Canvas demo + + + + + + + + + + \ No newline at end of file diff --git a/examplesForWebDemo/src/html5/interactive3/interactive2.js b/examplesForWebDemo/src/html5/interactive3/interactive2.js new file mode 100644 index 00000000000..442796dfb27 --- /dev/null +++ b/examplesForWebDemo/src/html5/interactive3/interactive2.js @@ -0,0 +1,459 @@ +{ + var classes = function () { + var Vector = Kotlin.Class.create({initialize:function (x, y) { + this.$x = x; + this.$y = y; + }, get_x:function () { + return this.$x; + }, get_y:function () { + return this.$y; + }, plus:function (v) { + { + return interactive2.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y()); + } + }, minus:function () { + { + return interactive2.v_0(-this.get_x(), -this.get_y()); + } + }, minus$0:function (v) { + { + return interactive2.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y()); + } + }, times:function (coef) { + { + return interactive2.v_0(this.get_x() * coef, this.get_y() * coef); + } + }, distanceTo:function (v) { + { + return Math.sqrt(this.minus$0(v).get_sqr()); + } + }, rotatedBy:function (theta) { + { + var sin = Math.sin(theta); + var cos = Math.cos(theta); + return interactive2.v_0(this.get_x() * cos - this.get_y() * sin, this.get_x() * sin + this.get_y() * cos); + } + }, isInRect:function (topLeft, size) { + { + return this.get_x() >= topLeft.get_x() && this.get_x() <= topLeft.get_x() + size.get_x() && this.get_y() >= topLeft.get_y() && this.get_y() <= topLeft.get_y() + size.get_y(); + } + }, get_sqr:function () { + { + return this.get_x() * this.get_x() + this.get_y() * this.get_y(); + } + }, get_normalized:function () { + { + return this.times(1 / Math.sqrt(this.get_sqr())); + } + } + }); + var RadialGradientGenerator = Kotlin.Class.create({initialize:function (context) { + this.$context = context; + this.$gradients = new Kotlin.ArrayList; + this.$current = 0; + { + this.newColorStops([ + [0, '#F59898'], + [0.5, '#F57373'], + [1, '#DB6B6B'] + ]); + this.newColorStops([ + [0.39, 'rgb(140,167,209)'], + [0.7, 'rgb(104,139,209)'], + [0.85, 'rgb(67,122,217)'] + ]); + this.newColorStops([ + [0, 'rgb(255,222,255)'], + [0.5, 'rgb(255,185,222)'], + [1, 'rgb(230,154,185)'] + ]); + this.newColorStops([ + [0, 'rgb(255,209,114)'], + [0.5, 'rgb(255,174,81)'], + [1, 'rgb(241,145,54)'] + ]); + this.newColorStops([ + [0, 'rgb(132,240,135)'], + [0.5, 'rgb(91,240,96)'], + [1, 'rgb(27,245,41)'] + ]); + this.newColorStops([ + [0, 'rgb(250,147,250)'], + [0.5, 'rgb(255,80,255)'], + [1, 'rgb(250,0,217)'] + ]); + } + }, get_context:function () { + return this.$context; + }, get_gradients:function () { + return this.$gradients; + }, get_current:function () { + return this.$current; + }, set_current:function (tmp$0) { + this.$current = tmp$0; + }, newColorStops:function (colorStops) { + { + this.get_gradients().add(colorStops); + } + }, getNext:function () { + { + var result = this.get_gradients().get(this.get_current()); + this.set_current((this.get_current() + 1) % this.get_gradients().size()); + return result; + } + } + }); + var CanvasState = Kotlin.Class.create({initialize:function (canvas) { + this.$canvas = canvas; + this.$width = this.get_canvas().width; + this.$height = this.get_canvas().height; + this.$context = getContext(); + this.$valid = false; + this.$shapes = new Kotlin.ArrayList; + this.$selection = null; + this.$dragOff = new interactive2.Vector_0(0, 0); + this.$interval = 1000 / 30; + { + var tmp$4; + var tmp$3; + var tmp$2; + var tmp$1; + var tmp$0_0; + $(this.get_canvas()).mousedown((tmp$0_0 = this , function (it) { + { + var tmp$0; + tmp$0_0.set_valid(false); + tmp$0_0.set_selection(null); + var mousePos = tmp$0_0.mousePos_0(it); + { + tmp$0 = tmp$0_0.get_shapes().iterator(); + while (tmp$0.hasNext()) { + var shape = tmp$0.next(); + { + if (shape.contains(mousePos)) { + tmp$0_0.set_dragOff(mousePos.minus$0(shape.get_pos())); + shape.set_selected(true); + tmp$0_0.set_selection(shape); + break; + } + } + } + } + } + } + )); + $(this.get_canvas()).mousemove((tmp$1 = this , function (it) { + { + if (tmp$1.get_selection() != null) { + Kotlin.sure(tmp$1.get_selection()).set_pos(tmp$1.mousePos_0(it).minus$0(tmp$1.get_dragOff())); + tmp$1.set_valid(false); + } + } + } + )); + $(this.get_canvas()).mouseup((tmp$2 = this , function (it) { + { + if (tmp$2.get_selection() != null) { + Kotlin.sure(tmp$2.get_selection()).set_selected(false); + } + tmp$2.set_selection(null); + tmp$2.set_valid(false); + } + } + )); + $(this.get_canvas()).dblclick((tmp$3 = this , function (it) { + { + var redTransparentCircle = new interactive2.Creature_0(tmp$3.mousePos_0(it), tmp$3); + tmp$3.addShape(redTransparentCircle); + tmp$3.set_valid(false); + } + } + )); + interactive2.doWithPeriod(this.get_interval(), (tmp$4 = this , function () { + { + tmp$4.draw(); + } + } + )); + } + }, get_canvas:function () { + return this.$canvas; + }, get_width:function () { + return this.$width; + }, get_height:function () { + return this.$height; + }, get_context:function () { + return this.$context; + }, get_valid:function () { + return this.$valid; + }, set_valid:function (tmp$0) { + this.$valid = tmp$0; + }, get_shapes:function () { + return this.$shapes; + }, set_shapes:function (tmp$0) { + this.$shapes = tmp$0; + }, get_selection:function () { + return this.$selection; + }, set_selection:function (tmp$0) { + this.$selection = tmp$0; + }, get_dragOff:function () { + return this.$dragOff; + }, set_dragOff:function (tmp$0) { + this.$dragOff = tmp$0; + }, get_interval:function () { + return this.$interval; + }, mousePos_0:function (e) { + { + var offset = new interactive2.Vector_0(0, 0); + var element = this.get_canvas(); + while (element != null) { + var el = Kotlin.sure(element); + offset = offset.plus(new interactive2.Vector_0(el.offsetLeft, el.offsetTop)); + element = el.offsetParent; + } + return (new interactive2.Vector_0(e.pageX, e.pageY)).minus$0(offset); + } + }, addShape:function (shape) { + { + this.get_shapes().add(shape); + this.set_valid(false); + } + }, clear:function () { + { + this.get_context().fillStyle = '#FFFFFF'; + this.get_context().fillRect(0, 0, this.get_width(), this.get_height()); + this.get_context().strokeStyle = '#000000'; + this.get_context().lineWidth = 4; + this.get_context().strokeRect(0, 0, this.get_width(), this.get_height()); + } + }, draw:function () { + { + var tmp$0; + if (this.get_valid()) + return; + this.clear(); + { + tmp$0 = this.get_shapes().iterator(); + while (tmp$0.hasNext()) { + var shape = tmp$0.next(); + { + shape.draw(this); + } + } + } + this.set_valid(true); + } + } + }); + var Shape = Kotlin.Class.create({initialize:function () { + this.$selected = false; + }, draw:function (state) { + }, contains:function (mousePos) { + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_selected:function () { + return this.$selected; + }, set_selected:function (tmp$0) { + this.$selected = tmp$0; + } + }); + var Creature = Kotlin.Class.create(Shape, {initialize:function (pos, state) { + this.$pos = pos; + this.$state = state; + this.super_init(); + this.$shadowOffset = interactive2.v_0(-5, 5); + this.$colorStops = interactive2.get_gradientGenerator().getNext(); + this.$relSize = 0.05; + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_state:function () { + return this.$state; + }, set_state:function (tmp$0) { + this.$state = tmp$0; + }, get_shadowOffset:function () { + return this.$shadowOffset; + }, get_colorStops:function () { + return this.$colorStops; + }, get_relSize:function () { + return this.$relSize; + }, get_radius:function () { + { + return this.get_state().get_width() * this.get_relSize(); + } + }, get_position:function () { + var tmp$0; + if (this.get_selected()) + tmp$0 = this.get_pos().minus$0(this.get_shadowOffset()); + else + tmp$0 = this.get_pos(); + { + return tmp$0; + } + }, get_directionToLogo:function () { + { + return interactive2.get_JB().get_centre().minus$0(this.get_position()).get_normalized(); + } + }, contains:function (mousePos) { + { + return this.get_pos().distanceTo(mousePos) < this.get_radius(); + } + }, fillCircle:function (receiver, position, rad) { + { + receiver.beginPath(); + receiver.arc(position.get_x(), position.get_y(), rad, 0, 2 * Math.PI, false); + receiver.closePath(); + receiver.fill(); + } + }, draw:function (state) { + { + var context = state.get_context(); + if (!this.get_selected()) { + this.drawCreature(context); + } + else { + this.drawCreatureWithShadow(context); + } + } + }, drawCreature:function (context) { + { + context.fillStyle = this.getGradient(context); + this.fillCircle(context, this.get_position(), this.get_radius()); + this.drawEye(context); + this.drawTail(context); + } + }, getGradient:function (context) { + { + var tmp$0; + var gradientCentre = this.get_position().plus(this.get_directionToLogo().times(this.get_radius() / 4)); + var gradient = context.createRadialGradient(gradientCentre.get_x(), gradientCentre.get_y(), 1, gradientCentre.get_x(), gradientCentre.get_y(), 2 * this.get_radius()); + { + tmp$0 = Kotlin.arrayIterator(this.get_colorStops()); + while (tmp$0.hasNext()) { + var colorStop = tmp$0.next(); + { + gradient.addColorStop(colorStop[0], colorStop[1]); + } + } + } + return gradient; + } + }, drawTail:function (context) { + { + var tailDirection = this.get_directionToLogo().minus(); + var tailPos = this.get_position().plus(tailDirection.times(this.get_radius()).times(0.7)); + var tailSize = this.get_radius() * 1.6; + var angle = Math.PI / 6; + var p1 = tailPos.plus(tailDirection.rotatedBy(angle).times(tailSize)); + var p2 = tailPos.plus(tailDirection.rotatedBy(-angle).times(tailSize)); + context.fillStyle = this.getGradient(context); + context.beginPath(); + context.moveTo(tailPos.get_x(), tailPos.get_y()); + context.lineTo(p1.get_x(), p1.get_y()); + var middlePoint = this.get_position().plus(tailDirection.times(this.get_radius()).times(1)); + context.quadraticCurveTo(middlePoint.get_x(), middlePoint.get_y(), p2.get_x(), p2.get_y()); + context.lineTo(tailPos.get_x(), tailPos.get_y()); + context.closePath(); + context.fill(); + } + }, drawEye:function (context) { + { + var eyePos = this.get_directionToLogo().times(this.get_radius()).times(0.6).plus(this.get_position()); + var eyeRadius = this.get_radius() / 3; + var eyeLidRadius = eyeRadius / 2; + context.fillStyle = '#FFFFFF'; + this.fillCircle(context, eyePos, eyeRadius); + context.fillStyle = '#000000'; + this.fillCircle(context, eyePos, eyeLidRadius); + } + }, drawCreatureWithShadow:function (context) { + { + context.save(); + this.setShadow(context); + context.fillStyle = this.getGradient(context); + this.fillCircle(context, this.get_position(), this.get_radius()); + context.restore(); + this.drawEye(context); + this.drawTail(context); + } + }, setShadow:function (context) { + { + context.shadowColor = 'rgba(100, 100, 100, 0.7)'; + context.shadowBlur = 5; + context.shadowOffsetX = this.get_shadowOffset().get_x(); + context.shadowOffsetY = this.get_shadowOffset().get_y(); + } + } + }); + var Logo = Kotlin.Class.create(Shape, {initialize:function (pos, relSize) { + this.$pos = pos; + this.$relSize = relSize; + this.super_init(); + this.$imageSize = interactive2.v_0(704, 254); + this.$canvasSize = this.get_imageSize().times(this.get_relSize()); + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_relSize:function () { + return this.$relSize; + }, set_relSize:function (tmp$0) { + this.$relSize = tmp$0; + }, get_imageSize:function () { + return this.$imageSize; + }, get_canvasSize:function () { + return this.$canvasSize; + }, draw:function (state) { + { + var context = state.get_context(); + context.drawImage(getJBLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_pos().get_x(), this.get_pos().get_y(), this.get_canvasSize().get_x(), this.get_canvasSize().get_y()); + } + }, contains:function (mousePos) { + { + return mousePos.isInRect(this.get_pos(), this.get_canvasSize()); + } + }, get_centre:function () { + { + return this.get_pos().plus(this.get_canvasSize().times(0.5)); + } + } + }); + return {Shape_0:Shape, Logo_0:Logo, Creature_0:Creature, RadialGradientGenerator_0:RadialGradientGenerator, CanvasState_0:CanvasState, Vector_0:Vector}; + } + (); + var interactive2 = Kotlin.Namespace.create({initialize:function () { + interactive2.$gradientGenerator = new interactive2.RadialGradientGenerator_0(getContext()); + interactive2.$JB = new interactive2.Logo_0(interactive2.v_0(20, 20), 0.3); + }, get_gradientGenerator:function () { + return interactive2.$gradientGenerator; + }, get_JB:function () { + return interactive2.$JB; + }, doWithPeriod:function (period, f) { + { + setInterval(f, period); + } + }, v_0:function (x, y) { + { + return new interactive2.Vector_0(x, y); + } + }, main:function () { + { + var state = new interactive2.CanvasState_0(getCanvas()); + state.addShape(interactive2.get_JB()); + setTimeout(function () { + { + state.set_valid(false); + } + } + ); + } + } + }, classes); + interactive2.initialize(); +} + +var args = []; +interactive2.main(args); diff --git a/examplesForWebDemo/src/html5/interactive3/interactive3.js b/examplesForWebDemo/src/html5/interactive3/interactive3.js new file mode 100644 index 00000000000..0fd6120c796 --- /dev/null +++ b/examplesForWebDemo/src/html5/interactive3/interactive3.js @@ -0,0 +1,529 @@ +{ + var classes = function () { + var Vector = Kotlin.Class.create({initialize:function (x, y) { + this.$x = x; + this.$y = y; + }, get_x:function () { + return this.$x; + }, get_y:function () { + return this.$y; + }, plus:function (v) { + { + return interactive3.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y()); + } + }, minus:function () { + { + return interactive3.v_0(-this.get_x(), -this.get_y()); + } + }, minus$0:function (v) { + { + return interactive3.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y()); + } + }, times:function (koef) { + { + return interactive3.v_0(this.get_x() * koef, this.get_y() * koef); + } + }, distanceTo:function (v) { + { + return Math.sqrt(this.minus$0(v).get_sqr()); + } + }, rotatedBy:function (theta) { + { + var sin = Math.sin(theta); + var cos = Math.cos(theta); + return interactive3.v_0(this.get_x() * cos - this.get_y() * sin, this.get_x() * sin + this.get_y() * cos); + } + }, isInRect:function (topLeft, size) { + { + return this.get_x() >= topLeft.get_x() && this.get_x() <= topLeft.get_x() + size.get_x() && this.get_y() >= topLeft.get_y() && this.get_y() <= topLeft.get_y() + size.get_y(); + } + }, get_sqr:function () { + { + return this.get_x() * this.get_x() + this.get_y() * this.get_y(); + } + }, get_normalized:function () { + { + return this.times(1 / Math.sqrt(this.get_sqr())); + } + } + }); + var RadialGradientGenerator = Kotlin.Class.create({initialize:function (context) { + this.$context = context; + this.$gradients = new Kotlin.ArrayList; + this.$current = 0; + { + this.newColorStops([ + [0, '#F59898'], + [0.5, '#F57373'], + [1, '#DB6B6B'] + ]); + this.newColorStops([ + [0.39, 'rgb(140,167,209)'], + [0.7, 'rgb(104,139,209)'], + [0.85, 'rgb(67,122,217)'] + ]); + this.newColorStops([ + [0, 'rgb(255,222,255)'], + [0.5, 'rgb(255,185,222)'], + [1, 'rgb(230,154,185)'] + ]); + this.newColorStops([ + [0, 'rgb(255,209,114)'], + [0.5, 'rgb(255,174,81)'], + [1, 'rgb(241,145,54)'] + ]); + this.newColorStops([ + [0, 'rgb(132,240,135)'], + [0.5, 'rgb(91,240,96)'], + [1, 'rgb(27,245,41)'] + ]); + this.newColorStops([ + [0, 'rgb(250,147,250)'], + [0.5, 'rgb(255,80,255)'], + [1, 'rgb(250,0,217)'] + ]); + } + }, get_context:function () { + return this.$context; + }, get_gradients:function () { + return this.$gradients; + }, get_current:function () { + return this.$current; + }, set_current:function (tmp$0) { + this.$current = tmp$0; + }, newColorStops:function (colorStops) { + { + this.get_gradients().add(colorStops); + } + }, getNext:function () { + { + var result = this.get_gradients().get(this.get_current()); + this.set_current((this.get_current() + 1) % this.get_gradients().size()); + return result; + } + } + }); + var CanvasState = Kotlin.Class.create({initialize:function (canvas) { + this.$canvas = canvas; + this.$width = this.get_canvas().width; + this.$height = this.get_canvas().height; + this.$context = getContext(); + this.$valid = false; + this.$shapes = new Kotlin.ArrayList; + this.$selection = null; + this.$dragOff = new interactive3.Vector_0(0, 0); + this.$interval = 1000 / 30; + { + var tmp$4; + var tmp$3; + var tmp$2; + var tmp$1; + var tmp$0_0; + $(this.get_canvas()).mousedown((tmp$0_0 = this , function (it) { + { + var tmp$0; + tmp$0_0.set_valid(false); + tmp$0_0.set_selection(null); + var mousePos = tmp$0_0.mousePos_0(it); + { + tmp$0 = tmp$0_0.get_shapes().iterator(); + while (tmp$0.hasNext()) { + var shape = tmp$0.next(); + { + if (shape.contains(mousePos)) { + tmp$0_0.set_dragOff(mousePos.minus$0(shape.get_pos())); + shape.set_selected(true); + tmp$0_0.set_selection(shape); + break; + } + } + } + } + } + } + )); + $(this.get_canvas()).mousemove((tmp$1 = this , function (it) { + { + if (tmp$1.get_selection() != null) { + Kotlin.sure(tmp$1.get_selection()).set_pos(tmp$1.mousePos_0(it).minus$0(tmp$1.get_dragOff())); + tmp$1.set_valid(false); + } + } + } + )); + $(this.get_canvas()).mouseup((tmp$2 = this , function (it) { + { + if (tmp$2.get_selection() != null) { + Kotlin.sure(tmp$2.get_selection()).set_selected(false); + } + tmp$2.set_selection(null); + tmp$2.set_valid(false); + } + } + )); + $(this.get_canvas()).dblclick((tmp$3 = this , function (it) { + { + var newCreature = new interactive3.Creature_0(tmp$3.mousePos_0(it), tmp$3); + tmp$3.addShape(newCreature); + tmp$3.set_valid(false); + } + } + )); + setInterval((tmp$4 = this , function () { + { + tmp$4.draw(); + } + } + ), this.get_interval()); + } + }, get_canvas:function () { + return this.$canvas; + }, get_width:function () { + return this.$width; + }, get_height:function () { + return this.$height; + }, get_size:function () { + { + return interactive3.v_0(this.get_width(), this.get_height()); + } + }, get_context:function () { + return this.$context; + }, get_valid:function () { + return this.$valid; + }, set_valid:function (tmp$0) { + this.$valid = tmp$0; + }, get_shapes:function () { + return this.$shapes; + }, set_shapes:function (tmp$0) { + this.$shapes = tmp$0; + }, get_selection:function () { + return this.$selection; + }, set_selection:function (tmp$0) { + this.$selection = tmp$0; + }, get_dragOff:function () { + return this.$dragOff; + }, set_dragOff:function (tmp$0) { + this.$dragOff = tmp$0; + }, get_interval:function () { + return this.$interval; + }, mousePos_0:function (e) { + { + var offset = new interactive3.Vector_0(0, 0); + var element = this.get_canvas(); + while (element != null) { + var el = Kotlin.sure(element); + offset = offset.plus(new interactive3.Vector_0(el.offsetLeft, el.offsetTop)); + element = el.offsetParent; + } + return (new interactive3.Vector_0(e.pageX, e.pageY)).minus$0(offset); + } + }, addShape:function (shape) { + { + this.get_shapes().add(shape); + this.set_valid(false); + } + }, clear:function () { + { + this.get_context().fillStyle = '#FFFFFF'; + this.get_context().fillRect(0, 0, this.get_width(), this.get_height()); + this.get_context().strokeStyle = '#000000'; + this.get_context().lineWidth = 4; + this.get_context().strokeRect(0, 0, this.get_width(), this.get_height()); + } + }, draw:function () { + { + var tmp$0; + if (this.get_valid()) + return; + this.clear(); + { + tmp$0 = interactive3.reversed(this.get_shapes()).iterator(); + while (tmp$0.hasNext()) { + var shape = tmp$0.next(); + { + shape.draw(this); + } + } + } + interactive3.get_Kotlin().draw(this); + this.set_valid(true); + } + } + }); + var Shape = Kotlin.Class.create({initialize:function () { + this.$selected = false; + }, draw:function (state) { + }, contains:function (mousePos) { + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_selected:function () { + return this.$selected; + }, set_selected:function (tmp$0) { + this.$selected = tmp$0; + }, shadowed:function (receiver, shadowOffset, alpha, render) { + { + receiver.save(); + receiver.shadowColor = 'rgba(100, 100, 100, ' + alpha + ')'; + receiver.shadowBlur = 5; + receiver.shadowOffsetX = shadowOffset.get_x(); + receiver.shadowOffsetY = shadowOffset.get_y(); + render.call(receiver); + receiver.restore(); + } + }, fillPath:function (receiver, constructPath) { + { + receiver.beginPath(); + constructPath.call(receiver); + receiver.closePath(); + receiver.fill(); + } + } + }); + var Creature = Kotlin.Class.create(Shape, {initialize:function (pos, state) { + this.$pos = pos; + this.$state = state; + this.super_init(); + this.$shadowOffset = interactive3.v_0(-5, 5); + this.$colorStops = interactive3.get_gradientGenerator().getNext(); + this.$relSize = 0.05; + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_state:function () { + return this.$state; + }, set_state:function (tmp$0) { + this.$state = tmp$0; + }, get_shadowOffset:function () { + return this.$shadowOffset; + }, get_colorStops:function () { + return this.$colorStops; + }, get_relSize:function () { + return this.$relSize; + }, get_radius:function () { + { + return this.get_state().get_width() * this.get_relSize(); + } + }, get_position:function () { + var tmp$0; + if (this.get_selected()) + tmp$0 = this.get_pos().minus$0(this.get_shadowOffset()); + else + tmp$0 = this.get_pos(); + { + return tmp$0; + } + }, get_directionToLogo:function () { + { + return interactive3.get_Kotlin().get_centre().minus$0(this.get_position()).get_normalized(); + } + }, contains:function (mousePos) { + { + return this.get_pos().distanceTo(mousePos) < this.get_radius(); + } + }, circlePath:function (receiver, position, rad) { + { + receiver.arc(position.get_x(), position.get_y(), rad, 0, 2 * Math.PI, false); + } + }, fillCircle:function (receiver, position, rad) { + { + var tmp$0; + this.fillPath(receiver, (tmp$0 = this , function () { + { + tmp$0.circlePath(receiver, position, rad); + } + } + )); + } + }, draw:function (state) { + { + var context = state.get_context(); + if (!this.get_selected()) { + this.drawCreature(context); + } + else { + this.drawCreatureWithShadow(context); + } + } + }, drawCreature:function (context) { + { + var tmp$0; + context.fillStyle = this.getGradient(context); + this.fillPath(context, (tmp$0 = this , function () { + { + tmp$0.tailPath(context); + tmp$0.circlePath(this, tmp$0.get_position(), tmp$0.get_radius()); + } + } + )); + this.drawEye(context); + } + }, getGradient:function (context) { + { + var tmp$0; + var gradientCentre = this.get_position().plus(this.get_directionToLogo().times(this.get_radius() / 4)); + var gradient = context.createRadialGradient(gradientCentre.get_x(), gradientCentre.get_y(), 1, gradientCentre.get_x(), gradientCentre.get_y(), 2 * this.get_radius()); + { + tmp$0 = Kotlin.arrayIterator(this.get_colorStops()); + while (tmp$0.hasNext()) { + var colorStop = tmp$0.next(); + { + gradient.addColorStop(colorStop[0], colorStop[1]); + } + } + } + return gradient; + } + }, tailPath:function (context) { + { + var tailDirection = this.get_directionToLogo().minus(); + var tailPos = this.get_position().plus(tailDirection.times(this.get_radius()).times(1)); + var tailSize = this.get_radius() * 1.6; + var angle = Math.PI / 6; + var p1 = tailPos.plus(tailDirection.rotatedBy(angle).times(tailSize)); + var p2 = tailPos.plus(tailDirection.rotatedBy(-angle).times(tailSize)); + var middlePoint = this.get_position().plus(tailDirection.times(this.get_radius()).times(1)); + context.moveTo(tailPos.get_x(), tailPos.get_y()); + context.lineTo(p1.get_x(), p1.get_y()); + context.quadraticCurveTo(middlePoint.get_x(), middlePoint.get_y(), p2.get_x(), p2.get_y()); + context.lineTo(tailPos.get_x(), tailPos.get_y()); + } + }, drawEye:function (context) { + { + var eyePos = this.get_directionToLogo().times(this.get_radius()).times(0.6).plus(this.get_position()); + var eyeRadius = this.get_radius() / 3; + var eyeLidRadius = eyeRadius / 2; + context.fillStyle = '#FFFFFF'; + this.fillCircle(context, eyePos, eyeRadius); + context.fillStyle = '#000000'; + this.fillCircle(context, eyePos, eyeLidRadius); + } + }, drawCreatureWithShadow:function (context) { + { + var tmp$0_0; + this.shadowed(context, this.get_shadowOffset(), 0.7, (tmp$0_0 = this , function () { + { + var tmp$0; + context.fillStyle = tmp$0_0.getGradient(context); + tmp$0_0.fillPath(this, (tmp$0 = tmp$0_0 , function () { + { + tmp$0.tailPath(context); + tmp$0.circlePath(context, tmp$0.get_position(), tmp$0.get_radius()); + } + } + )); + } + } + )); + this.drawEye(context); + } + } + }); + var Logo = Kotlin.Class.create(Shape, {initialize:function (pos, relSize) { + this.$pos = pos; + this.$relSize = relSize; + this.super_init(); + this.$shadowOffset = interactive3.v_0(-3, 3); + this.$imageSize = interactive3.v_0(377, 393); + this.$size = this.get_imageSize().times(this.get_relSize()); + }, get_pos:function () { + return this.$pos; + }, set_pos:function (tmp$0) { + this.$pos = tmp$0; + }, get_relSize:function () { + return this.$relSize; + }, set_relSize:function (tmp$0) { + this.$relSize = tmp$0; + }, get_shadowOffset:function () { + return this.$shadowOffset; + }, get_imageSize:function () { + return this.$imageSize; + }, get_size:function () { + return this.$size; + }, set_size:function (tmp$0) { + this.$size = tmp$0; + }, get_position:function () { + var tmp$0; + if (this.get_selected()) + tmp$0 = this.get_pos().minus$0(this.get_shadowOffset()); + else + tmp$0 = this.get_pos(); + { + return tmp$0; + } + }, drawLogo:function (state) { + { + this.set_size(this.get_imageSize().times(state.get_size().get_x() / this.get_imageSize().get_x()).times(this.get_relSize())); + state.get_context().drawImage(getJBLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_position().get_x(), this.get_position().get_y(), this.get_size().get_x(), this.get_size().get_y()); + } + }, draw:function (state) { + { + var context = state.get_context(); + if (this.get_selected()) { + var tmp$0; + this.shadowed(context, this.get_shadowOffset(), 0.2, (tmp$0 = this , function () { + { + tmp$0.drawLogo(state); + } + } + )); + } + else { + this.drawLogo(state); + } + } + }, contains:function (mousePos) { + { + return mousePos.isInRect(this.get_pos(), this.get_size()); + } + }, get_centre:function () { + { + return this.get_pos().plus(this.get_size().times(0.5)); + } + } + }); + return {Shape_0:Shape, Logo_0:Logo, Creature_0:Creature, RadialGradientGenerator_0:RadialGradientGenerator, CanvasState_0:CanvasState, Vector_0:Vector}; + } + (); + var interactive3 = Kotlin.Namespace.create({initialize:function () { + interactive3.$gradientGenerator = new interactive3.RadialGradientGenerator_0(getContext()); + interactive3.$Kotlin = new interactive3.Logo_0(interactive3.v_0(20, 20), 0.25); + }, get_gradientGenerator:function () { + return interactive3.$gradientGenerator; + }, get_Kotlin:function () { + return interactive3.$Kotlin; + }, v_0:function (x, y) { + { + return new interactive3.Vector_0(x, y); + } + }, main:function () { + { + var state = new interactive3.CanvasState_0(getCanvas()); + state.addShape(interactive3.get_Kotlin()); + state.addShape(new interactive3.Creature_0(state.get_size().times(0.25), state)); + state.addShape(new interactive3.Creature_0(state.get_size().times(0.75), state)); + setTimeout(function () { + { + state.set_valid(false); + } + } + ); + } + }, reversed:function (receiver) { + { + var result = new Kotlin.ArrayList; + var i = receiver.size(); + while (i > 0) { + result.add(receiver.get(--i)); + } + return result; + } + } + }, classes); + interactive3.initialize(); +} + +var args = []; +interactive3.main(args); diff --git a/examplesForWebDemo/src/html5/interactive3/kotlinlogo.png b/examplesForWebDemo/src/html5/interactive3/kotlinlogo.png new file mode 100644 index 0000000000000000000000000000000000000000..5394223b3d68f0c2adc07a62767a171cbf141326 GIT binary patch literal 6663 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 Unit) { + save() + shadowColor = "rgba(100, 100, 100, $alpha)" + shadowBlur = 5.0 + shadowOffsetX = shadowOffset.x + shadowOffsetY = shadowOffset.y + render() + restore() + } + + fun Context.fillPath(constructPath : Context.() -> Unit) { + beginPath() + constructPath() + closePath() + fill() + } +} + +class Logo(override var pos : Vector, +var relSize : Double = 0.25) +: Shape() +{ + val shadowOffset = v(-3.0, 3.0) + val imageSize = v(377.0, 393.0) + var size : Vector = imageSize * relSize + val position : Vector + get() = if (selected) pos - shadowOffset else pos + + fun drawLogo(state : CanvasState) { + size = imageSize * (state.size.x / imageSize.x) * relSize + state.context.drawImage(getJBLogo(), 0.0, 0.0, imageSize.x, imageSize.y, position.x, position.y, size.x, size.y) + } + + override fun draw(state : CanvasState) { + val context = state.context + if (selected) { + context.shadowed(shadowOffset, 0.2) { + drawLogo(state) + } + } else { + drawLogo(state) + } + } + + override fun contains(mousePos: Vector): Boolean = mousePos.isInRect(pos, size) + + val centre : Vector + get() = pos + size * 0.5 +} + +class Creature(override var pos : Vector, +var state : CanvasState) : Shape() { + + val shadowOffset = v(-5.0, 5.0) + val colorStops = gradientGenerator.getNext() + val relSize = 0.05 + val radius : Double + get() = state.width * relSize + val position : Vector + get() = if (selected) pos - shadowOffset else pos + val directionToLogo : Vector + get() = (Kotlin.centre - position).normalized + + override fun contains(mousePos : Vector) = pos distanceTo mousePos < radius + + fun Context.circlePath(position : Vector, rad : Double) { + arc(position.x, position.y, rad, 0.0, 2 * Math.PI, false) + } + + fun Context.fillCircle(position : Vector, rad : Double) { + fillPath { + circlePath(position, rad) + } + } + + override fun draw(state : CanvasState) { + val context = state.context + if (!selected) { + drawCreature(context) + } else { + drawCreatureWithShadow(context) + } + } + + fun drawCreature(context : Context) { + context.fillStyle = getGradient(context) + context.fillPath { + tailPath(context) + circlePath(position, radius) + } + drawEye(context) + } + + fun getGradient(context : Context) : CanvasGradient { + val gradientCentre = position + directionToLogo * (radius / 4) + val gradient = context.createRadialGradient(gradientCentre.x, gradientCentre.y, 1.0, gradientCentre.x, gradientCentre.y, 2 * radius) + for (colorStop in colorStops) { + gradient.addColorStop(colorStop._1, colorStop._2) + } + return gradient + } + + fun tailPath(context : Context) { + val tailDirection = -directionToLogo + val tailPos = position + tailDirection * radius * 1.0 + val tailSize = radius * 1.6 + val angle = Math.PI / 6.0 + val p1 = tailPos + tailDirection.rotatedBy(angle) * tailSize + val p2 = tailPos + tailDirection.rotatedBy(-angle) * tailSize + val middlePoint = position + tailDirection * radius * 1.0 + context.moveTo(tailPos.x, tailPos.y) + context.lineTo(p1.x, p1.y) + context.quadraticCurveTo(middlePoint.x, middlePoint.y, p2.x, p2.y) + context.lineTo(tailPos.x, tailPos.y) + } + + fun drawEye(context : Context) { + val eyePos = directionToLogo * radius * 0.6 + position + val eyeRadius = radius / 3 + val eyeLidRadius = eyeRadius / 2 + context.fillStyle = "#FFFFFF" + context.fillCircle(eyePos, eyeRadius) + context.fillStyle = "#000000" + context.fillCircle(eyePos, eyeLidRadius) + } + + fun drawCreatureWithShadow(context : Context) { + context.shadowed(shadowOffset, 0.7) { + context.fillStyle = getGradient(context) + fillPath { + tailPath(context) + context.circlePath(position, radius) + } + } + drawEye(context) + } +} + +class CanvasState(val canvas : Canvas) { + val width = canvas.width + val height = canvas.height + val size : Vector + get() = v(width, height) + val context = getContext() + var valid = false + var shapes = ArrayList() + var selection : Shape? = null + var dragOff = Vector() + val interval = 1000 / 30 + + + { + jq(canvas).mousedown { + valid = false + selection = null + val mousePos = mousePos(it) + for (shape in shapes) { + if (mousePos in shape) { + dragOff = mousePos - shape.pos + shape.selected = true + selection = shape + break + } + } + } + + jq(canvas).mousemove { + if (selection != null) { + selection.sure().pos = mousePos(it) - dragOff + valid = false + } + } + + jq(canvas).mouseup { + if (selection != null) { + selection.sure().selected = false + } + selection = null + valid = false + } + + jq(canvas).dblclick { + val newCreature = Creature(mousePos(it), this @CanvasState) + addShape(newCreature) + valid = false + } + + setInterval({ + draw() + }, interval) + } + + fun mousePos(e : MouseEvent) : Vector { + var offset = Vector() + var element : DomElement? = canvas + while (element != null) { + val el : DomElement = element.sure() + offset += Vector(el.offsetLeft, el.offsetTop) + element = el.offsetParent + } + return Vector(e.pageX, e.pageY) - offset + } + + fun addShape(shape : Shape) { + shapes.add(shape) + valid = false + } + + fun clear() { + context.fillStyle = "#FFFFFF" + context.fillRect(0.0, 0.0, width, height) + context.strokeStyle = "#000000" + context.lineWidth = 4.0 + context.strokeRect(0.0, 0.0, width, height) + } + + fun draw() { + if (valid) return + + clear() + for (shape in shapes.reversed()) { + shape.draw(this) + } + Kotlin.draw(this) + valid = true + } +} + +class RadialGradientGenerator(val context : Context) { + val gradients = ArrayList>() + var current = 0 + + fun newColorStops(vararg colorStops : #(Double, String)) { + gradients.add(colorStops) + } + + { + newColorStops(#(0.0, "#F59898"), #(0.5, "#F57373"), #(1.0, "#DB6B6B")) + newColorStops(#(0.39, "rgb(140,167,209)"), #(0.7, "rgb(104,139,209)"), #(0.85, "rgb(67,122,217)")) + newColorStops(#(0.0, "rgb(255,222,255)"), #(0.5, "rgb(255,185,222)"), #(1.0, "rgb(230,154,185)")) + newColorStops(#(0.0, "rgb(255,209,114)"), #(0.5, "rgb(255,174,81)"), #(1.0, "rgb(241,145,54)")) + newColorStops(#(0.0, "rgb(132,240,135)"), #(0.5, "rgb(91,240,96)"), #(1.0, "rgb(27,245,41)")) + newColorStops(#(0.0, "rgb(250,147,250)"), #(0.5, "rgb(255,80,255)"), #(1.0, "rgb(250,0,217)")) + } + + fun getNext() : Array<#(Double, String)> { + val result = gradients.get(current) + current = (current + 1) % gradients.size() + return result + } +} + +fun v(x : Double, y : Double) = Vector(x, y) + +class Vector(val x : Double = 0.0, val y : Double = 0.0) { + fun plus(v : Vector) = v(x + v.x, y + v.y) + fun minus() = v(-x, -y) + fun minus(v : Vector) = v(x - v.x, y - v.y) + fun times(koef : Double) = v(x * koef, y * koef) + fun distanceTo(v : Vector) = Math.sqrt((this - v).sqr) + fun rotatedBy(theta : Double) : Vector { + val sin = Math.sin(theta) + val cos = Math.cos(theta) + return v(x * cos - y * sin, x * sin + y * cos) + } + + fun isInRect(topLeft : Vector, size : Vector) = (x >= topLeft.x) && (x <= topLeft.x + size.x) && + (y >= topLeft.y) && (y <= topLeft.y + size.y) + + val sqr : Double + get() = x * x + y * y + val normalized : Vector + get() = this * (1.0 / Math.sqrt(sqr)) +} + +fun main() { + val state = CanvasState(getCanvas()) + state.addShape(Kotlin) + state.addShape(Creature(state.size * 0.25, state)) + state.addShape(Creature(state.size * 0.75, state)) + setTimeout({ + state.valid = false + }) +} + +fun List.reversed() : List { + val result = ArrayList() + var i = size() + while (i > 0) { + result.add(get(--i)) + } + return result +} \ No newline at end of file diff --git a/examplesForWebDemo/src/html5/interactive3/template.html b/examplesForWebDemo/src/html5/interactive3/template.html new file mode 100644 index 00000000000..6daacd29669 --- /dev/null +++ b/examplesForWebDemo/src/html5/interactive3/template.html @@ -0,0 +1,15 @@ + + + + Canvas demo + + + + + + + + + + \ No newline at end of file diff --git a/examplesForWebDemo/src/html5/test/test.kt b/examplesForWebDemo/src/html5/test/test.kt index e4fdcae638d..47f5754e507 100644 --- a/examplesForWebDemo/src/html5/test/test.kt +++ b/examplesForWebDemo/src/html5/test/test.kt @@ -7,7 +7,7 @@ import jquery.*; fun main() { jq { Test().run(); - HelloKotlin().run(); + // HelloKotlin().run(); } } diff --git a/examplesForWebDemo/src/html5/test/testhtml.js b/examplesForWebDemo/src/html5/test/testhtml.js index 8312453d084..876a7228c17 100644 --- a/examplesForWebDemo/src/html5/test/testhtml.js +++ b/examplesForWebDemo/src/html5/test/testhtml.js @@ -106,7 +106,6 @@ $(function () { { (new testhtml.Test_0).run(); - (new testhtml.HelloKotlin_0).run(); } } ); diff --git a/jslib/src/html5/core.kt b/jslib/src/html5/core.kt index ac64a472188..01b34c33150 100644 --- a/jslib/src/html5/core.kt +++ b/jslib/src/html5/core.kt @@ -5,20 +5,28 @@ import js.DomElement native class Context() { - fun save() {} - fun restore() {} + fun save() { + } + fun restore() { + } - fun scale(x : Double, y : Double) {} - fun rotate(angle : Double) {} - fun translate(x : Double, y : Double) {} + fun scale(x : Double, y : Double) { + } + fun rotate(angle : Double) { + } + fun translate(x : Double, y : Double) { + } - fun clearRect(x : Double, y : Double, w : Double, h : Double) {} - fun fillRect(x : Double, y : Double, w : Double, h : Double) {} - fun strokeRect(x : Double, y : Double, w : Double, h : Double) {} + fun clearRect(x : Double, y : Double, w : Double, h : Double) { + } + fun fillRect(x : Double, y : Double, w : Double, h : Double) { + } + fun strokeRect(x : Double, y : Double, w : Double, h : Double) { + } var globalAlpha : Double = 1.0; - var strokeStyle : String = "" - var fillStyle : String = "" + var strokeStyle : Any = "" + var fillStyle : Any = "" var lineWidth : Double = 1.0 var shadowOffsetX : Double = 0.0 var shadowOffsetY : Double = 0.0 @@ -26,35 +34,64 @@ class Context() { var shadowColor : String = "" var font : String = "" - fun beginPath() {} - fun moveTo(x : Double, y : Double) {} - fun closePath() {} + fun beginPath() { + } + fun moveTo(x : Double, y : Double) { + } + fun closePath() { + } - fun lineTo(x : Double, y : Double) {} - fun quadraticCurveTo(cpx : Double, cpy : Double, x : Double, y : Double) {} - fun bezierCurveTo(cp1x : Double, cp1y : Double, cp2x : Double, cp2y : Double, x : Double, y : Double) {} - fun arcTo(x1 : Double, y1 : Double, x2 : Double, y2 : Double, radius : Double) {} - fun arc(x : Double, y : Double, radius : Double, startAngle : Double, endAngle : Double, anticlockwise : Boolean) {} + fun lineTo(x : Double, y : Double) { + } + fun quadraticCurveTo(cpx : Double, cpy : Double, x : Double, y : Double) { + } + fun bezierCurveTo(cp1x : Double, cp1y : Double, cp2x : Double, cp2y : Double, x : Double, y : Double) { + } + fun arcTo(x1 : Double, y1 : Double, x2 : Double, y2 : Double, radius : Double) { + } + fun arc(x : Double, y : Double, radius : Double, startAngle : Double, endAngle : Double, anticlockwise : Boolean) { + } - fun rect(x : Double, y : Double, w : Double, h : Double) {} - fun fill() {} - fun stroke() {} + fun rect(x : Double, y : Double, w : Double, h : Double) { + } + fun fill() { + } + fun stroke() { + } - fun fillText(text : String, x : Double, y : Double) {} - fun fillText(text : String, x : Double, y : Double, maxWidth : Double) {} - fun strokeText(text : String, x : Double, y : Double) {} - fun strokeText(text : String, x : Double, y : Double, maxWidth : Double) {} + fun fillText(text : String, x : Double, y : Double) { + } + fun fillText(text : String, x : Double, y : Double, maxWidth : Double) { + } + fun strokeText(text : String, x : Double, y : Double) { + } + fun strokeText(text : String, x : Double, y : Double, maxWidth : Double) { + } fun measureText(text : String) : TextMetrics = TextMetrics(); - fun drawImage(image : HTMLImageElement, dx : Double, dy : Double) {} - fun drawImage(image : HTMLImageElement, dx: Double, dy: Double, dw: Double, dh: Double) {} + fun drawImage(image : HTMLImageElement, dx : Double, dy : Double) { + } + fun drawImage(image : HTMLImageElement, dx: Double, dy: Double, dw: Double, dh: Double) { + } fun drawImage(image : HTMLImageElement, sx: Double, sy: Double, - sw: Double, sh: Double, dx: Double, dy: Double, dw: Double, dh: Double) {} + sw: Double, sh: Double, dx: Double, dy: Double, dw: Double, dh: Double) { + } + + fun createLinearGradient(x0 : Double, y0 : Double, x1 : Double, y1 : Double) : CanvasGradient = CanvasGradient() + fun createRadialGradient(x0 : Double, y0 : Double, r0 : Double, x1 : Double, y1 : Double, r1 : Double) : CanvasGradient = CanvasGradient(); + } native -class HTMLImageElement() : DomElement() {} +class HTMLImageElement() : DomElement() { +} + +native +class CanvasGradient() { + fun addColorStop(offset : Double, color : String) {} +} + native class Canvas() : DomElement() {