Embedding Kotlin Playground

fun main(args : Array) {
println("Hello Kotliner!")
println("Click this green button at the top right!")
}

没错，这是一段可以嵌入到博客中独立运行的kotlin代码。要注意的是，您还能修改其中的代码，而不只是让它运行起来。

// The code below doesn't compile. Add only one char to make it runnable again
fun main(args : Array) {
val fix = "Kotlin "
val me = "is great"
println(fixme)
}

这很酷，不是吗？让上述代码也顺利工作起来吧。

通常来说，您并不希望所有代码段都显示出来，而只想展示当中最有趣和最重要的部分。这也是可以实现的。

fun main(args: Array) {
val hint = "Click the plus button to see the full code"
//sampleStart
println (hint.length)
println("yes, 42")
//sampleEnd
}

您也可以添加测试：

// Implement extension functions Int.r() and Pair.r()
// and make them convert Int and Pair to RationalNumber.

fun Int.r(): RationalNumber = TODO()
fun Pair<Int, Int>.r(): RationalNumber = TODO()

data class RationalNumber(val numerator: Int, val denominator: Int)

你也可以将JavaScript设置为目标平台，甚至还能在canvas上绘制图案

/**
* In this example strange creatures are watching the kotlin logo.
* You can drag'n'drop them as well as the logo. Doubleclick to add
* more creatures but be careful. They may be watching you!
*/
package creatures

import jquery.*
import org.w3c.dom.*
import kotlin.browser.document
import kotlin.browser.window
import kotlin.js.Math

fun getImage(path: String): HTMLImageElement {
val image = window.document.createElement("img") as HTMLImageElement
image.src = path
return image
}

val canvas = initalizeCanvas()

fun initalizeCanvas(): HTMLCanvasElement {
val canvas = document.createElement("canvas") as HTMLCanvasElement
val context = canvas.getContext("2d") as CanvasRenderingContext2D
context.canvas.width = window.innerWidth.toInt();
context.canvas.height = window.innerHeight.toInt();
document.body!!.appendChild(canvas)
return canvas
}

val context: CanvasRenderingContext2D
get() {
return canvas.getContext("2d") as CanvasRenderingContext2D
}

abstract class Shape() {

abstract fun draw(state: CanvasState)
// these two abstract methods defines that our shapes can be dragged
operator abstract fun contains(mousePos: Vector): Boolean

abstract var pos: Vector

var selected: Boolean = false

// a couple of helper extension methods we'll be using in the derived classes
fun CanvasRenderingContext2D.shadowed(shadowOffset: Vector, alpha: Double, render: CanvasRenderingContext2D.() -> Unit) {
save()
shadowColor = "rgba(100, 100, 100, $alpha)"
shadowBlur = 5.0
shadowOffsetX = shadowOffset.x
shadowOffsetY = shadowOffset.y
render()
restore()
}

fun CanvasRenderingContext2D.fillPath(constructPath: CanvasRenderingContext2D.() -> Unit) {
beginPath()
constructPath()
closePath()
fill()
}
}

val Kotlin = Logo(v(250.0, 75.0))

class Logo(override var pos: Vector) : Shape() {
val relSize: Double = 0.18
val shadowOffset = v(-3.0, 3.0)
val imageSize = v(150.0, 150.0)
var size: Vector = imageSize * relSize
// get-only properties like this saves you lots of typing and are very expressive
val position: Vector
get() = if (selected) pos - shadowOffset else pos

fun drawLogo(state: CanvasState) {
size = imageSize * (state.size.x / imageSize.x) * relSize
// getKotlinLogo() is a 'magic' function here defined only for purposes of demonstration but in fact it just find an element containing the logo
state.context.drawImage(getImage("http://try.kotlinlang.org/static/images/kotlin_logo.svg"), 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) {
// using helper we defined in Shape class
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
}

val gradientGenerator: RadialGradientGenerator? = null
get() {
if (field == null) {
field = RadialGradientGenerator(context)
}
return field
}

class Creature(override var pos: Vector, val state: CanvasState) : Shape() {

val shadowOffset = v(-5.0, 5.0)
val colorStops = gradientGenerator!!.getNext()
val relSize = 0.05
// these properties have no backing fields and in java/javascript they could be represented as little helper functions
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

//notice how the infix call can make some expressions extremely expressive
override fun contains(mousePos: Vector) = pos distanceTo mousePos < radius

// defining more nice extension functions
fun CanvasRenderingContext2D.circlePath(position: Vector, rad: Double) {
arc(position.x, position.y, rad, 0.0, 2 * Math.PI, false)
}

//notice we can use an extension function we just defined inside another extension function
fun CanvasRenderingContext2D.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: CanvasRenderingContext2D) {
context.fillStyle = getGradient(context)
context.fillPath {
tailPath(context)
circlePath(position, radius)
}
drawEye(context)
}

fun getGradient(context: CanvasRenderingContext2D): 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.first, colorStop.second)
}
return gradient
}

fun tailPath(context: CanvasRenderingContext2D) {
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: CanvasRenderingContext2D) {
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: CanvasRenderingContext2D) {
context.shadowed(shadowOffset, 0.7) {
context.fillStyle = getGradient(context)
fillPath {
tailPath(context)
context.circlePath(position, radius)
}
}
drawEye(context)
}
}

class CanvasState(val canvas: HTMLCanvasElement) {
var width = canvas.width
var height = canvas.height
val size: Vector
get() = v(width.toDouble(), height.toDouble())
val context = creatures.context
var valid = false
var shapes = mutableListOf()
var selection: Shape? = null
var dragOff = Vector()
val interval = 1000 / 30

init {
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!!.pos = mousePos(it) - dragOff
valid = false
}
}

jq(canvas).mouseup {
if (selection != null) {
selection!!.selected = false
}
selection = null
valid = false
}

jq(canvas).dblclick {
val newCreature = Creature(mousePos(it), this@CanvasState)
addShape(newCreature)
valid = false
}

window.setInterval({
draw()
}, interval)
}

fun mousePos(e: MouseEvent): Vector {
var offset = Vector()
var element: HTMLElement? = canvas
while (element != null) {
val el: HTMLElement = element
offset += Vector(el.offsetLeft.toDouble(), el.offsetTop.toDouble())
element = el.offsetParent as HTMLElement?
}
return Vector(e.pageX, e.pageY) - offset
}

fun addShape(shape: Shape) {
shapes.add(shape)
valid = false
}

fun clear() {
context.fillStyle = "#D0D0D0"
context.fillRect(0.0, 0.0, width.toDouble(), height.toDouble())
context.strokeStyle = "#000000"
context.lineWidth = 4.0
context.strokeRect(0.0, 0.0, width.toDouble(), height.toDouble())
}

fun draw() {
if (valid) return

clear()
for (shape in shapes.reversed()) {
shape.draw(this)
}
Kotlin.draw(this)
valid = true
}
}

class RadialGradientGenerator(val context: CanvasRenderingContext2D) {
val gradients = mutableListOf<Array>>()
var current = 0

fun newColorStops(vararg colorStops: Pair<Double, String>) {
gradients.add(colorStops)
}

init {
newColorStops(Pair(0.0, "#F59898"), Pair(0.5, "#F57373"), Pair(1.0, "#DB6B6B"))
newColorStops(Pair(0.39, "rgb(140,167,209)"), Pair(0.7, "rgb(104,139,209)"), Pair(0.85, "rgb(67,122,217)"))
newColorStops(Pair(0.0, "rgb(255,222,255)"), Pair(0.5, "rgb(255,185,222)"), Pair(1.0, "rgb(230,154,185)"))
newColorStops(Pair(0.0, "rgb(255,209,114)"), Pair(0.5, "rgb(255,174,81)"), Pair(1.0, "rgb(241,145,54)"))
newColorStops(Pair(0.0, "rgb(132,240,135)"), Pair(0.5, "rgb(91,240,96)"), Pair(1.0, "rgb(27,245,41)"))
newColorStops(Pair(0.0, "rgb(250,147,250)"), Pair(0.5, "rgb(255,80,255)"), Pair(1.0, "rgb(250,0,217)"))
}

fun getNext(): Array> {
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) {
operator fun plus(v: Vector) = v(x + v.x, y + v.y)
operator fun unaryMinus() = v(-x, -y)
operator fun minus(v: Vector) = v(x - v.x, y - v.y)
operator fun times(koef: Double) = v(x * koef, y * koef)
infix 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(args: Array) {
//sampleStart
val state = CanvasState(canvas).apply {
addShape(Kotlin)
addShape(Creature(size * 0.25, this))
addShape(Creature(size * 0.75, this))
}
window.setTimeout({ state.valid = false }, 1000)
// You can drag this objects
//sampleEnd
}

fun List.reversed(): List {
val result = mutableListOf()
var i = size
while (i > 0) {
result.add(get(--i))
}
return result
}

有时候您并不需要或者不能创建一个可运行的示例。此时，您可以运用highlight-only特性，在相同的样式下显示这段不会运行的代码。

val simpleText1 = "It's just an ordinary Kotlin snippet"
...
val simpleText239 = "It doesn't compile actually"

嵌入式Kotlin环境工作原理

一直以来，成千上万的萌新通过try.kotlinlang.org这个网站作为一种交互方式来学习Kotlin。尤其是Kotlin Koans Online现在已经非常受欢迎。高端用户可以直接利用这个开发环境来试运行小段代码，而无需打开IDE，例如在StackOverflow上粘贴代码来回答问题的时候。

Embedded Kotlin Playground在同样的原理下工作，但是允许你在网页中编写及运行示例。编译将在我们的后端服务器上进行，然后运行在你的浏览器上（如果平台是JS）或者运行在服务器上（如果平台是JVM）。

前端

只需要在header中添加简单的一行代码，即可将该环境嵌入到你的页面：

现在页面上所有代码块都将被转换为能运行的Kotlin代码片段。当然可以自定义data-selector将脚本应用到某些特定的类，也可以手动配置Kotlin运行环境。

除此之外，还有很多其他的安装及自定义选项，可以在文档中查看。

后端

嵌入式环境将在后端编译代码，并高亮显示完成的信息。通常情况下，你不需要担心后端，直接使用我们的服务器即可，除非你想引用自定义的JVM库。

当编写的示例需要引用到外部的库，例如你在为自己的库编写可交互文档时，你需要配置及运行一个开发环境的实例。这是一件很容易的事：添加依赖，运行两个预定制的gradle task，再执行docker-compose up，看！服务器已经跑起来了。更多的细节请查看指引。

它正应用于这些地方

• 在官网的Kotlin文档中，我们已经大规模地去使用这个技术。所有新的文档，都含有可以运行的sample（参考Basic syntax，1.1、1.2、lambdas、Coroutines的更新内容）。对于标准库的一些函数，也带有这种形象的例子。
• Kotlin By Example也是采取Kotlin嵌入环境来编写示例
• 我们也发布了一个WordPress的插件，增加了kotlin标签，允许您在任意文章嵌入可交互的Kotlin开发环境。本文中所有示例都是在该插件的帮助下完成编写。
• 在Kotlin论坛里，你可以通过run-kotlin标签，在markdown语法下编写kotlin代码来回答问题，但请保证语法正确。

应用场景

Kotlin嵌入环境改善了阅读体验，并增加了代码示例的表现力。读者不仅能看到代码，还可以运行它，更改它，并再次执行已更改的代码。特别是在以下场合中，我们鼓励所有作者都编写可运行的Kotlin代码片段：

• 课堂上
• 幻灯片和书籍上的补充资料
• 库及框架的文档
• 博客文章中的示例

在不久的将来，我们还会为嵌入式Kotlin环境上的脚本编写提供支持。

fun main(args: Array) {
//sampleStart
println("请尽情享受Kotlin！")
//sampleEnd
}

原文链接：https://blog.jetbrains.com/kotlin/2018/04/embedding-kotlin-playground/