{"id":58214,"date":"2025-08-16T06:29:54","date_gmt":"2025-08-15T22:29:54","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/58214.html"},"modified":"2025-08-16T06:29:54","modified_gmt":"2025-08-15T22:29:54","slug":"qml-canvas%e7%bb%98%e5%88%b6%e6%b1%bd%e8%bd%a6%e4%bb%aa%e8%a1%a8%e7%9b%98%e6%ba%90%e7%a0%81%e5%88%86%e4%ba%ab","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/58214.html","title":{"rendered":"QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab"},"content":{"rendered":"<\/p>\n<h4>QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab<\/h4>\n<ul>\n<li>\u4e00\u3001\u6548\u679c\u5c55\u793a<\/li>\n<li>\u4e8c\u3001\u6e90\u7801\u5206\u4eab<\/li>\n<li>\u4e09\u3001QML Context2D \u65b9\u6cd5\u4ecb\u7ecd<\/li>\n<li>\n<ul>\n<li>1\u3001\u8def\u5f84\u7ed8\u5236<\/li>\n<li>2\u3001 \u586b\u5145\u4e0e\u63cf\u8fb9<\/li>\n<li>3\u3001\u6587\u672c\u7ed8\u5236<\/li>\n<li>4\u3001\u56fe\u50cf\u64cd\u4f5c<\/li>\n<li>5\u3001\u53d8\u6362<\/li>\n<li>6\u3001\u72b6\u6001\u7ba1\u7406**<\/li>\n<li>7\u3001\u5408\u6210\u4e0e\u88c1\u526a<\/li>\n<li>8\u3001\u6837\u5f0f\u5c5e\u6027<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>\u4e00\u3001\u6548\u679c\u5c55\u793a<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250815222952-689fb4e007b1b.gif\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<h2>\u4e8c\u3001\u6e90\u7801\u5206\u4eab<\/h2>\n<p>import QtQuick<br \/>\nimport QtQuick<span class=\"token punctuation\">.<\/span>Controls<\/p>\n<p>Window <span class=\"token punctuation\">{<\/span><br \/>\n    id<span class=\"token operator\">:<\/span>self<br \/>\n    width<span class=\"token operator\">:<\/span> <span class=\"token number\">640<\/span><br \/>\n    height<span class=\"token operator\">:<\/span> <span class=\"token number\">500<\/span><br \/>\n    visible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><br \/>\n    title<span class=\"token operator\">:<\/span> <span class=\"token function\">qsTr<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Hello World&#034;<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>    property <span class=\"token keyword\">int<\/span> maxValue<span class=\"token operator\">:<\/span> <span class=\"token number\">100<\/span>  <span class=\"token comment\">\/\/ \u4eea\u8868\u76d8\u6700\u5927\u503c&#xff08;\u5982100%&#xff09;<\/span><br \/>\n    property <span class=\"token keyword\">int<\/span> minValue<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span>    <span class=\"token comment\">\/\/ \u4eea\u8868\u76d8\u6700\u5c0f\u503c&#xff08;\u59820%&#xff09;<\/span><br \/>\n    property <span class=\"token keyword\">int<\/span> value<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span>       <span class=\"token comment\">\/\/ \u5f53\u524d\u663e\u793a\u6570\u503c&#xff08;\u9700\u52a8\u6001\u7ed1\u5b9a&#xff09;<\/span><br \/>\n    property <span class=\"token keyword\">int<\/span> redScale<span class=\"token operator\">:<\/span> <span class=\"token number\">80<\/span><br \/>\n    property string unit<span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;Km\/h&#034;<\/span><br \/>\n    <span class=\"token comment\">\/\/color: &#034;gray&#034;<\/span><br \/>\n    Canvas <span class=\"token punctuation\">{<\/span><br \/>\n        id<span class=\"token operator\">:<\/span> canvas<br \/>\n        width<span class=\"token operator\">:<\/span> <span class=\"token number\">400<\/span><span class=\"token punctuation\">;<\/span> height<span class=\"token operator\">:<\/span> <span class=\"token number\">400<\/span>  <span class=\"token comment\">\/\/ \u4eea\u8868\u76d8\u5c3a\u5bf8&#xff08;\u6b63\u65b9\u5f62&#xff09;<\/span><br \/>\n        anchors<span class=\"token punctuation\">.<\/span>centerIn<span class=\"token operator\">:<\/span> parent  <span class=\"token comment\">\/\/ \u5c45\u4e2d\u663e\u793a<\/span><\/p>\n<p>        onPaint<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/p>\n<p>            var realWidth <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>width<span class=\"token punctuation\">,<\/span>height<span class=\"token punctuation\">)<\/span><\/p>\n<p>            var ctx <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;2d&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">reset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token comment\">\/\/ 1. \u7ed8\u5236\u5916\u6846&#xff08;\u7070\u8272\u5706\u73af&#xff09;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>strokeStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;gray&#034;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>lineWidth <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">20<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">arc<\/span><span class=\"token punctuation\">(<\/span>realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span>PI<span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">stroke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/\u5185\u90e8\u586b\u5145<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;black&#034;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">arc<\/span><span class=\"token punctuation\">(<\/span>realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span>PI<span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fill<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ 2. \u7ed8\u5236\u523b\u5ea6\u7ebf&#xff08;\u4e3b\u523b\u5ea6&#043;\u526f\u523b\u5ea6&#xff09;<\/span><br \/>\n            var startAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">45<\/span><br \/>\n            var r <span class=\"token operator\">&#061;<\/span> realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token operator\">*<\/span><span class=\"token number\">0.85<\/span><br \/>\n            var lineWidth <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">2<\/span><\/p>\n<p>            var rotate <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">360<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token punctuation\">(<\/span>startAngle <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">100<\/span><br \/>\n            var valTotal <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">abs<\/span><span class=\"token punctuation\">(<\/span>minValue<span class=\"token punctuation\">)<\/span><span class=\"token operator\">&#043;<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">abs<\/span><span class=\"token punctuation\">(<\/span>maxValue<span class=\"token punctuation\">)<\/span><br \/>\n            var valToAngle <span class=\"token operator\">&#061;<\/span> valTotal<span class=\"token operator\">\/<\/span><span class=\"token number\">100<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span>realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">rotate<\/span><span class=\"token punctuation\">(<\/span>startAngle<span class=\"token operator\">*<\/span>Math<span class=\"token punctuation\">.<\/span>PI<span class=\"token operator\">\/<\/span><span class=\"token number\">180<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>var i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                var color <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;#545454&#034;<\/span><br \/>\n                var redScaleStartVal <span class=\"token operator\">&#061;<\/span> minValue<span class=\"token operator\">&#043;<\/span>i<span class=\"token operator\">*<\/span>valToAngle<span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>redScaleStartVal<span class=\"token operator\">&gt;&#061;<\/span>redScale<span class=\"token punctuation\">)<\/span><br \/>\n                    color <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;#FF0000&#034;<\/span><br \/>\n                <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>i <span class=\"token operator\">%<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                <span class=\"token punctuation\">{<\/span><br \/>\n                    ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                    ctx<span class=\"token punctuation\">.<\/span>strokeStyle <span class=\"token operator\">&#061;<\/span> color<br \/>\n                    ctx<span class=\"token punctuation\">.<\/span>lineWidth <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">2<\/span><span class=\"token operator\">*<\/span>lineWidth<br \/>\n                    ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> r<span class=\"token punctuation\">)<\/span><br \/>\n                    ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> r <span class=\"token operator\">\/<\/span> <span class=\"token number\">1.2<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                    ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">stroke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>                <span class=\"token punctuation\">}<\/span><br \/>\n                <span class=\"token keyword\">else<\/span> <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>i <span class=\"token operator\">%<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                <span class=\"token punctuation\">{<\/span><br \/>\n                    ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                    ctx<span class=\"token punctuation\">.<\/span>strokeStyle <span class=\"token operator\">&#061;<\/span> color<br \/>\n                    ctx<span class=\"token punctuation\">.<\/span>lineWidth <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token operator\">*<\/span>lineWidth<br \/>\n                    ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> r<span class=\"token punctuation\">)<\/span><br \/>\n                    ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> r <span class=\"token operator\">\/<\/span> <span class=\"token number\">1.1<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                    ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">stroke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n                ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">rotate<\/span><span class=\"token punctuation\">(<\/span>rotate<span class=\"token operator\">*<\/span>Math<span class=\"token punctuation\">.<\/span>PI<span class=\"token operator\">\/<\/span><span class=\"token number\">180<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token comment\">\/\/\u7ed8\u5236\u523b\u5ea6\u503c<\/span><br \/>\n            var gap <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">360<\/span><span class=\"token operator\">&#8211;<\/span>startAngle<span class=\"token operator\">*<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            r <span class=\"token operator\">&#061;<\/span> realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token operator\">*<\/span><span class=\"token number\">0.6<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            var valGap <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">abs<\/span><span class=\"token punctuation\">(<\/span>minValue<span class=\"token punctuation\">)<\/span><span class=\"token operator\">&#043;<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">abs<\/span><span class=\"token punctuation\">(<\/span>maxValue<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            valGap<span class=\"token operator\">\/&#061;<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            var refreshVal <span class=\"token operator\">&#061;<\/span> minValue<span class=\"token punctuation\">;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;white&#034;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">rotate<\/span><span class=\"token punctuation\">(<\/span>startAngle<span class=\"token operator\">*<\/span>Math<span class=\"token punctuation\">.<\/span>PI<span class=\"token operator\">\/<\/span><span class=\"token number\">180<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>font <span class=\"token operator\">&#061;<\/span> &#096;bold $<span class=\"token punctuation\">{<\/span>realWidth<span class=\"token operator\">*<\/span><span class=\"token number\">0.06<\/span><span class=\"token punctuation\">}<\/span>px Arial&#096;<br \/>\n            <span class=\"token comment\">\/\/ctx.textAlign &#061; &#034;left&#034;<\/span><br \/>\n            <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span>var i<span class=\"token operator\">&#061;<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&lt;&#061;<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#061;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">{<\/span><br \/>\n                var angle <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">90<\/span><span class=\"token operator\">&#043;<\/span>startAngle<span class=\"token operator\">&#043;<\/span>gap<span class=\"token operator\">*<\/span>i<span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/\/\u89d2\u5ea6,10\u683c\u5b50\u753b\u4e00\u4e2a\u523b\u5ea6\u503c<\/span><\/p>\n<p>                var angleArc <span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">(<\/span> angle <span class=\"token operator\">%<\/span> <span class=\"token number\">360<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">3.14<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">180<\/span> <span class=\"token comment\">\/\/\u8f6c\u6362\u4e3a\u5f27\u5ea6<\/span><br \/>\n                var x <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>r<span class=\"token punctuation\">)<\/span><span class=\"token operator\">*<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">cos<\/span><span class=\"token punctuation\">(<\/span>angleArc<span class=\"token punctuation\">)<\/span><br \/>\n                var y <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>r<span class=\"token punctuation\">)<\/span><span class=\"token operator\">*<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sin<\/span><span class=\"token punctuation\">(<\/span>angleArc<span class=\"token punctuation\">)<\/span><\/p>\n<p>                var tempValue <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;&#034;<\/span><span class=\"token operator\">&#043;<\/span>refreshVal<br \/>\n                refreshVal <span class=\"token operator\">&#043;&#061;<\/span> valGap<span class=\"token punctuation\">;<\/span><br \/>\n                var w <span class=\"token operator\">&#061;<\/span> ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">measureText<\/span><span class=\"token punctuation\">(<\/span>tempValue<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>width<br \/>\n                var h <span class=\"token operator\">&#061;<\/span> realWidth<span class=\"token operator\">*<\/span><span class=\"token number\">0.06<\/span><br \/>\n                x <span class=\"token operator\">&#061;<\/span> x <span class=\"token operator\">&#8211;<\/span> w<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><br \/>\n                y <span class=\"token operator\">&#061;<\/span> y <span class=\"token operator\">&#043;<\/span> h<span class=\"token operator\">\/<\/span><span class=\"token number\">4<\/span><br \/>\n                ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillText<\/span><span class=\"token punctuation\">(<\/span>tempValue<span class=\"token punctuation\">,<\/span> x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token comment\">\/\/\u7ed8\u5236\u6307\u9488<\/span><\/p>\n<p>            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">restore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>            var degRotate <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">270.0<\/span>  <span class=\"token operator\">\/<\/span> <span class=\"token punctuation\">(<\/span>maxValue <span class=\"token operator\">&#8211;<\/span> minValue<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>value <span class=\"token operator\">&#8211;<\/span> minValue<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span><span class=\"token number\">135<\/span><br \/>\n            console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>degRotate<span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">rotate<\/span><span class=\"token punctuation\">(<\/span>degRotate<span class=\"token operator\">*<\/span> <span class=\"token number\">3.14<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">180<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>strokeStyle <span class=\"token operator\">&#061;<\/span> color<br \/>\n            ctx<span class=\"token punctuation\">.<\/span>lineWidth <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token operator\">*<\/span>lineWidth<br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token number\">40<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">stroke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/\u7ed8\u5236\u4e2d\u95f4\u5706\u5fc3<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;white&#034;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>strokeStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;white&#034;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>lineWidth <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">arc<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> realWidth<span class=\"token operator\">*<\/span><span class=\"token number\">0.04<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span>PI<span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fill<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">stroke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/\u7ed8\u5236\u663e\u793a\u503c<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">restore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;white&#034;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span>font <span class=\"token operator\">&#061;<\/span> &#096;bold $<span class=\"token punctuation\">{<\/span>realWidth<span class=\"token operator\">*<\/span><span class=\"token number\">0.07<\/span><span class=\"token punctuation\">}<\/span>px Arial&#096;<br \/>\n            ctx<span class=\"token punctuation\">.<\/span>textAlign <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;center&#034;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillText<\/span><span class=\"token punctuation\">(<\/span>value<span class=\"token operator\">&#043;<\/span><span class=\"token string\">&#034; &#034;<\/span><span class=\"token operator\">&#043;<\/span>unit<span class=\"token punctuation\">,<\/span> realWidth<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> realWidth<span class=\"token operator\">*<\/span><span class=\"token number\">0.8<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">stroke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    Slider<span class=\"token punctuation\">{<\/span><br \/>\n        width<span class=\"token operator\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<br \/>\n        anchors<span class=\"token punctuation\">.<\/span>bottom<span class=\"token operator\">:<\/span> parent<span class=\"token punctuation\">.<\/span>bottom<br \/>\n        anchors<span class=\"token punctuation\">.<\/span>leftMargin<span class=\"token operator\">:<\/span> <span class=\"token number\">20<\/span><br \/>\n        anchors<span class=\"token punctuation\">.<\/span>rightMargin<span class=\"token operator\">:<\/span> <span class=\"token number\">20<\/span><br \/>\n        onValueChanged<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            self<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> value<span class=\"token operator\">*<\/span><span class=\"token number\">100<\/span><br \/>\n            canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestPaint<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h2>\u4e09\u3001QML Context2D \u65b9\u6cd5\u4ecb\u7ecd<\/h2>\n<p>Context2D \u662f QML Canvas \u7ec4\u4ef6\u7684 2D \u7ed8\u56fe\u4e0a\u4e0b\u6587\u5bf9\u8c61&#xff0c;\u63d0\u4f9b\u7c7b\u4f3c HTML5 Canvas \u7684 API\u3002\u6240\u6709\u65b9\u6cd5\u5206\u7c7b\u5982\u4e0b&#xff1a;<\/p>\n<hr \/>\n<h3>1\u3001\u8def\u5f84\u7ed8\u5236<\/h3>\n<ul>\n<li>beginPath(): \u5f00\u59cb\u65b0\u8def\u5f84<\/li>\n<li>closePath(): \u95ed\u5408\u5f53\u524d\u8def\u5f84&#xff08;\u7ec8\u70b9\u8fde\u63a5\u8d77\u70b9&#xff09;<\/li>\n<li>moveTo(x, y): \u79fb\u52a8\u753b\u7b14\u5230\u5750\u6807 <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         (<\/p>\n<p>         x<\/p>\n<p>         ,<\/p>\n<p>         y<\/p>\n<p>         )<\/p>\n<p>        (x, y)<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">(<\/span><span class=\"mord mathnormal\">x<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">y<\/span><span class=\"mclose\">)<\/span><\/span><\/span><\/span><\/span><\/li>\n<li>lineTo(x, y): \u4ece\u5f53\u524d\u4f4d\u7f6e\u753b\u76f4\u7ebf\u5230 <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         (<\/p>\n<p>         x<\/p>\n<p>         ,<\/p>\n<p>         y<\/p>\n<p>         )<\/p>\n<p>        (x, y)<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">(<\/span><span class=\"mord mathnormal\">x<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">y<\/span><span class=\"mclose\">)<\/span><\/span><\/span><\/span><\/span><\/li>\n<li>arc(x, y, radius, startAngle, endAngle, anticlockwise): \u753b\u5706\u5f27\n<ul>\n<li><span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>           (<\/p>\n<p>           x<\/p>\n<p>           ,<\/p>\n<p>           y<\/p>\n<p>           )<\/p>\n<p>          (x, y)<\/p>\n<p>       <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">(<\/span><span class=\"mord mathnormal\">x<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">y<\/span><span class=\"mclose\">)<\/span><\/span><\/span><\/span><\/span> \u4e3a\u5706\u5fc3&#xff0c;<span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\"><\/p>\n<p>           r<\/p>\n<p>           a<\/p>\n<p>           d<\/p>\n<p>           i<\/p>\n<p>           u<\/p>\n<p>           s<\/p>\n<p>          radius<\/p>\n<p>       <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 0.6944em\"><\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0278em\">r<\/span><span class=\"mord mathnormal\">a<\/span><span class=\"mord mathnormal\">d<\/span><span class=\"mord mathnormal\">i<\/span><span class=\"mord mathnormal\">u<\/span><span class=\"mord mathnormal\">s<\/span><\/span><\/span><\/span><\/span> \u4e3a\u534a\u5f84<\/li>\n<\/ul>\n<\/li>\n<li>arcTo(x1, y1, x2, y2, radius): \u901a\u8fc7\u63a7\u5236\u70b9\u753b\u5706\u5f27<\/li>\n<li>quadraticCurveTo(cpx, cpy, x, y): \u4e8c\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf<\/li>\n<li>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): \u4e09\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf<\/li>\n<li>rect(x, y, width, height): \u6dfb\u52a0\u77e9\u5f62\u8def\u5f84<\/li>\n<\/ul>\n<hr \/>\n<h3>2\u3001 \u586b\u5145\u4e0e\u63cf\u8fb9<\/h3>\n<ul>\n<li>fill(): \u586b\u5145\u5f53\u524d\u8def\u5f84<\/li>\n<li>stroke(): \u63cf\u8fb9\u5f53\u524d\u8def\u5f84<\/li>\n<li>fillRect(x, y, width, height): \u76f4\u63a5\u586b\u5145\u77e9\u5f62<\/li>\n<li>strokeRect(x, y, width, height): \u76f4\u63a5\u63cf\u8fb9\u77e9\u5f62<\/li>\n<li>clearRect(x, y, width, height): \u6e05\u9664\u77e9\u5f62\u533a\u57df<\/li>\n<\/ul>\n<hr \/>\n<h3>3\u3001\u6587\u672c\u7ed8\u5236<\/h3>\n<ul>\n<li>fillText(text, x, y): \u5728 <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         (<\/p>\n<p>         x<\/p>\n<p>         ,<\/p>\n<p>         y<\/p>\n<p>         )<\/p>\n<p>        (x, y)<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">(<\/span><span class=\"mord mathnormal\">x<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">y<\/span><span class=\"mclose\">)<\/span><\/span><\/span><\/span><\/span> \u586b\u5145\u6587\u672c<\/li>\n<li>strokeText(text, x, y): \u5728 <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         (<\/p>\n<p>         x<\/p>\n<p>         ,<\/p>\n<p>         y<\/p>\n<p>         )<\/p>\n<p>        (x, y)<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">(<\/span><span class=\"mord mathnormal\">x<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">y<\/span><span class=\"mclose\">)<\/span><\/span><\/span><\/span><\/span> \u63cf\u8fb9\u6587\u672c<\/li>\n<li>measureText(text): \u8fd4\u56de\u6587\u672c\u5bbd\u5ea6\u4fe1\u606f&#xff08;\u5bf9\u8c61&#xff09;<\/li>\n<\/ul>\n<hr \/>\n<h3>4\u3001\u56fe\u50cf\u64cd\u4f5c<\/h3>\n<ul>\n<li>drawImage(image, dx, dy): \u7ed8\u5236\u56fe\u50cf\u5230 <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         (<\/p>\n<p>         d<\/p>\n<p>         x<\/p>\n<p>         ,<\/p>\n<p>         d<\/p>\n<p>         y<\/p>\n<p>         )<\/p>\n<p>        (dx, dy)<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">(<\/span><span class=\"mord mathnormal\">d<\/span><span class=\"mord mathnormal\">x<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord mathnormal\">d<\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">y<\/span><span class=\"mclose\">)<\/span><\/span><\/span><\/span><\/span><\/li>\n<li>drawImage(image, dx, dy, dWidth, dHeight): \u7f29\u653e\u7ed8\u5236<\/li>\n<li>drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): \u88c1\u526a\u540e\u7ed8\u5236<\/li>\n<\/ul>\n<hr \/>\n<h3>5\u3001\u53d8\u6362<\/h3>\n<ul>\n<li>scale(sx, sy): \u7f29\u653e <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         (<\/p>\n<p>         s<\/p>\n<p>         x<\/p>\n<p>         ,<\/p>\n<p>         s<\/p>\n<p>         y<\/p>\n<p>         )<\/p>\n<p>        (sx, sy)<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">(<\/span><span class=\"mord mathnormal\">s<\/span><span class=\"mord mathnormal\">x<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">sy<\/span><span class=\"mclose\">)<\/span><\/span><\/span><\/span><\/span> \u500d<\/li>\n<li>rotate(angle): \u65cb\u8f6c\u89d2\u5ea6 <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         a<\/p>\n<p>         n<\/p>\n<p>         g<\/p>\n<p>         l<\/p>\n<p>         e<\/p>\n<p>        angle<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 0.8889em;vertical-align: -0.1944em\"><\/span><span class=\"mord mathnormal\">an<\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">g<\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0197em\">l<\/span><span class=\"mord mathnormal\">e<\/span><\/span><\/span><\/span><\/span>&#xff08;\u5f27\u5ea6\u5236&#xff09;<\/li>\n<li>translate(tx, ty): \u5e73\u79fb <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         (<\/p>\n<p>         t<\/p>\n<p>         x<\/p>\n<p>         ,<\/p>\n<p>         t<\/p>\n<p>         y<\/p>\n<p>         )<\/p>\n<p>        (tx, ty)<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">(<\/span><span class=\"mord mathnormal\">t<\/span><span class=\"mord mathnormal\">x<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord mathnormal\">t<\/span><span class=\"mord mathnormal\" style=\"margin-right: 0.0359em\">y<\/span><span class=\"mclose\">)<\/span><\/span><\/span><\/span><\/span><\/li>\n<li>transform(a, b, c, d, e, f): \u77e9\u9635\u53d8\u6362\n<ul>\n<li>\u77e9\u9635\u5f62\u5f0f&#xff1a;<span class=\"katex--display\"><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>            [<\/p>\n<p>                a<\/p>\n<p>                c<\/p>\n<p>                e<\/p>\n<p>                b<\/p>\n<p>                d<\/p>\n<p>                f<\/p>\n<p>                0<\/p>\n<p>                0<\/p>\n<p>                1<\/p>\n<p>            ]<\/p>\n<p>           \\\\begin{bmatrix} a &amp; c &amp; e \\\\\\\\ b &amp; d &amp; f \\\\\\\\ 0 &amp; 0 &amp; 1 \\\\end{bmatrix}<\/p>\n<p>        <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 3.6em;vertical-align: -1.55em\"><\/span><span class=\"minner\"><span class=\"mopen\"><span class=\"delimsizing mult\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 2.05em\"><span class=\"\" style=\"top: -4.05em\"><span class=\"pstrut\" style=\"height: 5.6em\"><\/span><span class=\"\" style=\"width: 0.667em;height: 3.6em\"><\/p>\n<p>                 <\/span><\/span><\/span><span class=\"vlist-s\">\u200b<\/span><\/span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 1.55em\"><span class=\"\"><\/span><\/span><\/span><\/span><\/span><\/span><span class=\"mord\"><span class=\"mtable\"><span class=\"col-align-c\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 2.05em\"><span class=\"\" style=\"top: -4.21em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord mathnormal\">a<\/span><\/span><\/span><span class=\"\" style=\"top: -3.01em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord mathnormal\">b<\/span><\/span><\/span><span class=\"\" style=\"top: -1.81em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord\">0<\/span><\/span><\/span><\/span><span class=\"vlist-s\">\u200b<\/span><\/span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 1.55em\"><span class=\"\"><\/span><\/span><\/span><\/span><\/span><span class=\"arraycolsep\" style=\"width: 0.5em\"><\/span><span class=\"arraycolsep\" style=\"width: 0.5em\"><\/span><span class=\"col-align-c\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 2.05em\"><span class=\"\" style=\"top: -4.21em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord mathnormal\">c<\/span><\/span><\/span><span class=\"\" style=\"top: -3.01em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord mathnormal\">d<\/span><\/span><\/span><span class=\"\" style=\"top: -1.81em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord\">0<\/span><\/span><\/span><\/span><span class=\"vlist-s\">\u200b<\/span><\/span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 1.55em\"><span class=\"\"><\/span><\/span><\/span><\/span><\/span><span class=\"arraycolsep\" style=\"width: 0.5em\"><\/span><span class=\"arraycolsep\" style=\"width: 0.5em\"><\/span><span class=\"col-align-c\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 2.05em\"><span class=\"\" style=\"top: -4.21em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord mathnormal\">e<\/span><\/span><\/span><span class=\"\" style=\"top: -3.01em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord mathnormal\" style=\"margin-right: 0.1076em\">f<\/span><\/span><\/span><span class=\"\" style=\"top: -1.81em\"><span class=\"pstrut\" style=\"height: 3em\"><\/span><span class=\"mord\"><span class=\"mord\">1<\/span><\/span><\/span><\/span><span class=\"vlist-s\">\u200b<\/span><\/span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 1.55em\"><span class=\"\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><span class=\"mclose\"><span class=\"delimsizing mult\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 2.05em\"><span class=\"\" style=\"top: -4.05em\"><span class=\"pstrut\" style=\"height: 5.6em\"><\/span><span class=\"\" style=\"width: 0.667em;height: 3.6em\"><\/p>\n<p>                 <\/span><\/span><\/span><span class=\"vlist-s\">\u200b<\/span><\/span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height: 1.55em\"><span class=\"\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/li>\n<\/ul>\n<\/li>\n<li>setTransform(a, b, c, d, e, f): \u91cd\u7f6e\u5e76\u5e94\u7528\u65b0\u77e9\u9635<\/li>\n<\/ul>\n<hr \/>\n<h3>6\u3001\u72b6\u6001\u7ba1\u7406**<\/h3>\n<ul>\n<li>save(): \u4fdd\u5b58\u5f53\u524d\u72b6\u6001&#xff08;\u6837\u5f0f\/\u53d8\u6362&#xff09;<\/li>\n<li>restore(): \u6062\u590d\u6700\u8fd1\u4fdd\u5b58\u7684\u72b6\u6001<\/li>\n<\/ul>\n<hr \/>\n<h3>7\u3001\u5408\u6210\u4e0e\u88c1\u526a<\/h3>\n<ul>\n<li>globalAlpha: \u5168\u5c40\u900f\u660e\u5ea6&#xff08;\u5c5e\u6027&#xff0c;\u503c\u57df <span class=\"katex--inline\"><span class=\"katex\"><span class=\"katex-mathml\">\n<p>         [<\/p>\n<p>         0<\/p>\n<p>         ,<\/p>\n<p>         1<\/p>\n<p>         ]<\/p>\n<p>        [0, 1]<\/p>\n<p>     <\/span><span class=\"katex-html\"><span class=\"base\"><span class=\"strut\" style=\"height: 1em;vertical-align: -0.25em\"><\/span><span class=\"mopen\">[<\/span><span class=\"mord\">0<\/span><span class=\"mpunct\">,<\/span><span class=\"mspace\" style=\"margin-right: 0.1667em\"><\/span><span class=\"mord\">1<\/span><span class=\"mclose\">]<\/span><\/span><\/span><\/span><\/span>&#xff09;<\/li>\n<li>globalCompositeOperation: \u5408\u6210\u6a21\u5f0f&#xff08;\u5982 &#034;source-over&#034;&#xff09;<\/li>\n<li>clip(): \u5c06\u5f53\u524d\u8def\u5f84\u8bbe\u4e3a\u88c1\u526a\u533a\u57df<\/li>\n<\/ul>\n<hr \/>\n<h3>8\u3001\u6837\u5f0f\u5c5e\u6027<\/h3>\n<ul>\n<li>fillStyle: \u586b\u5145\u6837\u5f0f&#xff08;\u989c\u8272\/\u6e10\u53d8\/\u56fe\u6848&#xff09;<\/li>\n<li>strokeStyle: \u63cf\u8fb9\u6837\u5f0f<\/li>\n<li>lineWidth: \u63cf\u8fb9\u5bbd\u5ea6<\/li>\n<li>lineCap: \u7ebf\u7aef\u70b9\u6837\u5f0f&#xff08;&#034;butt&#034;, &#034;round&#034;, &#034;square&#034;&#xff09;<\/li>\n<li>lineJoin: \u7ebf\u8fde\u63a5\u6837\u5f0f&#xff08;&#034;miter&#034;, &#034;round&#034;, &#034;bevel&#034;&#xff09;<\/li>\n<li>miterLimit: \u659c\u63a5\u957f\u5ea6\u9650\u5236<\/li>\n<li>font: \u6587\u672c\u5b57\u4f53&#xff08;\u5982 &#034;bold 12px Arial&#034;&#xff09;<\/li>\n<li>textAlign: \u6587\u672c\u5bf9\u9f50&#xff08;&#034;start&#034;, &#034;center&#034;, &#034;end&#034;&#xff09;<\/li>\n<li>textBaseline: \u6587\u672c\u57fa\u7ebf&#xff08;&#034;top&#034;, &#034;middle&#034;, &#034;alphabetic&#034;&#xff09;<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250815222952-689fb4e0ca7a0.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb947\u6b21\uff0c\u70b9\u8d5e10\u6b21\uff0c\u6536\u85cf8\u6b21\u3002\u672c\u6587\u5206\u4eab\u4e86\u4e00\u4e2a\u4f7f\u7528QML Canvas\u7ed8\u5236\u7684\u6c7d\u8f66\u4eea\u8868\u76d8\u5b9e\u73b0\u65b9\u6848\u3002\u901a\u8fc7Context2D API\u5b9e\u73b0\u4e86\u5706\u5f62\u8868\u76d8\u3001\u523b\u5ea6\u7ebf\uff08\u4e3b\/\u526f\u523b\u5ea6\uff09\u3001\u6307\u9488\u52a8\u6001\u65cb\u8f6c\u3001\u6570\u503c\u663e\u793a\u7b49\u529f\u80fd\u3002\u5173\u952e\u7279\u6027\u5305\u62ec\uff1a1\uff09\u81ea\u5b9a\u4e49\u91cf\u7a0b\u8303\u56f4\uff080-100km\/h\uff09\u548c\u5371\u9669\u533a\u57df\uff08\u226580km\/h\u7ea2\u8272\u663e\u793a\uff09\uff1b2\uff09\u4f7f\u7528Slider\u63a7\u4ef6\u6a21\u62df\u6570\u503c\u53d8\u5316\uff1b3)\u91c7\u7528\u6570\u5b66\u8ba1\u7b97\u5b9e\u73b0\u89d2\u5ea6\u4e0e\u6570\u503c\u7684\u7cbe\u786e\u6620\u5c04\u3002\u4ee3\u7801\u7ed3\u6784\u6e05\u6670\uff0c\u5c55\u793a\u4e86Context2D\u7684\u8def\u5f84\u7ed8\u5236\u3001\u6587\u672c\u6e32\u67d3\u3001\u5750\u6807\u53d8\u6362\u7b49\u6838\u5fc3\u65b9\u6cd5\uff0c\u53ef\u4f5c\u4e3aQML\u52a8\u6001\u4eea\u8868\u76d8\u5f00\u53d1\u7684\u53c2\u8003\u5b9e\u73b0\u3002<\/p>\n","protected":false},"author":2,"featured_media":58212,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[5664,6130,6131],"topic":[],"class_list":{"0":"post-58214","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-server","8":"tag-qml","10":"tag-6131"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/58214.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb947\u6b21\uff0c\u70b9\u8d5e10\u6b21\uff0c\u6536\u85cf8\u6b21\u3002\u672c\u6587\u5206\u4eab\u4e86\u4e00\u4e2a\u4f7f\u7528QML Canvas\u7ed8\u5236\u7684\u6c7d\u8f66\u4eea\u8868\u76d8\u5b9e\u73b0\u65b9\u6848\u3002\u901a\u8fc7Context2D API\u5b9e\u73b0\u4e86\u5706\u5f62\u8868\u76d8\u3001\u523b\u5ea6\u7ebf\uff08\u4e3b\/\u526f\u523b\u5ea6\uff09\u3001\u6307\u9488\u52a8\u6001\u65cb\u8f6c\u3001\u6570\u503c\u663e\u793a\u7b49\u529f\u80fd\u3002\u5173\u952e\u7279\u6027\u5305\u62ec\uff1a1\uff09\u81ea\u5b9a\u4e49\u91cf\u7a0b\u8303\u56f4\uff080-100km\/h\uff09\u548c\u5371\u9669\u533a\u57df\uff08\u226580km\/h\u7ea2\u8272\u663e\u793a\uff09\uff1b2\uff09\u4f7f\u7528Slider\u63a7\u4ef6\u6a21\u62df\u6570\u503c\u53d8\u5316\uff1b3)\u91c7\u7528\u6570\u5b66\u8ba1\u7b97\u5b9e\u73b0\u89d2\u5ea6\u4e0e\u6570\u503c\u7684\u7cbe\u786e\u6620\u5c04\u3002\u4ee3\u7801\u7ed3\u6784\u6e05\u6670\uff0c\u5c55\u793a\u4e86Context2D\u7684\u8def\u5f84\u7ed8\u5236\u3001\u6587\u672c\u6e32\u67d3\u3001\u5750\u6807\u53d8\u6362\u7b49\u6838\u5fc3\u65b9\u6cd5\uff0c\u53ef\u4f5c\u4e3aQML\u52a8\u6001\u4eea\u8868\u76d8\u5f00\u53d1\u7684\u53c2\u8003\u5b9e\u73b0\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/58214.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-15T22:29:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250815222952-689fb4e007b1b.gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/58214.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/58214.html\",\"name\":\"QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2025-08-15T22:29:54+00:00\",\"dateModified\":\"2025-08-15T22:29:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/58214.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/58214.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/58214.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/58214.html","og_locale":"zh_CN","og_type":"article","og_title":"QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb947\u6b21\uff0c\u70b9\u8d5e10\u6b21\uff0c\u6536\u85cf8\u6b21\u3002\u672c\u6587\u5206\u4eab\u4e86\u4e00\u4e2a\u4f7f\u7528QML Canvas\u7ed8\u5236\u7684\u6c7d\u8f66\u4eea\u8868\u76d8\u5b9e\u73b0\u65b9\u6848\u3002\u901a\u8fc7Context2D API\u5b9e\u73b0\u4e86\u5706\u5f62\u8868\u76d8\u3001\u523b\u5ea6\u7ebf\uff08\u4e3b\/\u526f\u523b\u5ea6\uff09\u3001\u6307\u9488\u52a8\u6001\u65cb\u8f6c\u3001\u6570\u503c\u663e\u793a\u7b49\u529f\u80fd\u3002\u5173\u952e\u7279\u6027\u5305\u62ec\uff1a1\uff09\u81ea\u5b9a\u4e49\u91cf\u7a0b\u8303\u56f4\uff080-100km\/h\uff09\u548c\u5371\u9669\u533a\u57df\uff08\u226580km\/h\u7ea2\u8272\u663e\u793a\uff09\uff1b2\uff09\u4f7f\u7528Slider\u63a7\u4ef6\u6a21\u62df\u6570\u503c\u53d8\u5316\uff1b3)\u91c7\u7528\u6570\u5b66\u8ba1\u7b97\u5b9e\u73b0\u89d2\u5ea6\u4e0e\u6570\u503c\u7684\u7cbe\u786e\u6620\u5c04\u3002\u4ee3\u7801\u7ed3\u6784\u6e05\u6670\uff0c\u5c55\u793a\u4e86Context2D\u7684\u8def\u5f84\u7ed8\u5236\u3001\u6587\u672c\u6e32\u67d3\u3001\u5750\u6807\u53d8\u6362\u7b49\u6838\u5fc3\u65b9\u6cd5\uff0c\u53ef\u4f5c\u4e3aQML\u52a8\u6001\u4eea\u8868\u76d8\u5f00\u53d1\u7684\u53c2\u8003\u5b9e\u73b0\u3002","og_url":"https:\/\/www.wsisp.com\/helps\/58214.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2025-08-15T22:29:54+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250815222952-689fb4e007b1b.gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/58214.html","url":"https:\/\/www.wsisp.com\/helps\/58214.html","name":"QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2025-08-15T22:29:54+00:00","dateModified":"2025-08-15T22:29:54+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/58214.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/58214.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/58214.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"QML Canvas\u7ed8\u5236\u6c7d\u8f66\u4eea\u8868\u76d8\u6e90\u7801\u5206\u4eab"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/58214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=58214"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/58214\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/58212"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=58214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=58214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=58214"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=58214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}