cvs/docs/.vuepress/dist/assets/js/19.ba4ce020.js

A basic canvas framework for 2d drawing.

(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{228:function(t,s,a){"use strict";a.r(s);var n=a(0),_=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._v(" "),t._m(1),t._v(" "),t._m(2),t._m(3),t._v(" "),a("p",[t._v("除了支持元素的"),a("router-link",{attrs:{to:"/docs/element.html#options"}},[t._v("基础属性")]),t._v("外，还支持以下属性：")],1),t._v(" "),t._m(4),t._v(" "),t._m(5),t._v(" "),t._m(6),t._v(" "),t._m(7),a("ClientOnly",[a("c-image")],1)],1)},[function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"image"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#image","aria-hidden":"true"}},[this._v("#")]),this._v(" Image")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("绘制一个图像，"),s("code",[this._v("Image")]),this._v("继承自"),s("code",[this._v("Element")]),this._v("。")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("let")]),t._v(" element "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("Image")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("#")]),this._v(" options")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("table",[a("thead",[a("tr",[a("th",[t._v("options.key")]),t._v(" "),a("th",[t._v("value")]),t._v(" "),a("th",[t._v("description")]),t._v(" "),a("th",[t._v("default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("image")]),t._v(" "),a("td",[t._v("Object")]),t._v(" "),a("td",[t._v("canvas 图像源")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("w")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("在目标画布上绘制图像的宽度")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("h")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("在目标画布上绘制图像的高度")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("sx")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("源图像的矩形选择框的左上角 X 坐标")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("sy")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("源图像的矩形选择框的左上角 Y 坐标")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("sw")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("源图像的矩形选择框的宽度")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("sh")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("源图像的矩形选择框的高度")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("opacity")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("规定元素的透明度")]),t._v(" "),a("td",[a("code",[t._v("1.0")])])]),t._v(" "),a("tr",[a("td",[t._v("shadowColor")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("设置用于阴影的颜色")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("shadowBlur")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("设置用于阴影的模糊级别")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("shadowOffsetX")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("设置阴影距形状的水平距离")]),t._v(" "),a("td",[t._v("--")])]),t._v(" "),a("tr",[a("td",[t._v("shadowOffsetY")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("设置阴影距形状的垂直距离")]),t._v(" "),a("td",[t._v("--")])])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[this._v("TIP")]),this._v(" "),s("p",[this._v("在动画中，如果只有元素的位置发生变化，推荐开启"),s("code",[this._v("cache")]),this._v("，使用离屏渲染提高性能")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[this._v("#")]),this._v(" example")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scene "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("Scene")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    containerId"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"container"')]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{attrs:{class:"token keyword"}},[t._v("await")]),t._v(" scene"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("preload")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    safari"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token function"}},[t._v("require")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v('"../../../static/safari.png"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{attrs:{class:"token keyword"}},[t._v("let")]),t._v(" layer "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" scene"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("layer")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  layer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("Image")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      image"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"safari"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      x"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("200")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      y"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("10")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  layer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("draw")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])}],!1,null,null,null);_.options.__file="image.md";s.default=_.exports}}]);