javascript - 如何在 qml 画布路径上剪辑 MouseArea
问题描述
有人可以建议是否有办法将 Mousearea 剪辑到 QML 画布路径的形状(不是整个画布,只是画布内路径的形状)或替代方法,以便当鼠标进入画布路径时(或画布的可见部分)它可以是交互式的,谢谢。我使用画布制作了地图,地图的不同部分由不同的路径表示,下面是我的代码
Canvas{
width: 600
height: 600
x:0;
z: 5
visible: true
clip: false
property string dstrict: "cyan"
onDstrictChanged: requestPaint()
onPaint:mapdrawing();
function mapdrawing(){
var ctx = getContext("2d")
ctx.clearRect(0,0,parent.width,parent.height);
ctx.strokeStyle = "#BED348"
ctx.fillStyle = dstrict
ctx.lineWidth = 1
// #UG-317
ctx.beginPath();
ctx.fillStyle = dstrict
ctx.moveTo(425.834860, 109.202870);
ctx.lineTo(425.834860, 109.202870);
ctx.lineTo(430.094860, 108.892870);
ctx.lineTo(430.074860, 118.362870);
ctx.lineTo(429.244860, 121.872870);
ctx.lineTo(432.804860, 124.472870);
ctx.lineTo(433.964860, 128.072870);
ctx.lineTo(447.124860, 134.482870);
ctx.lineTo(446.954860, 144.952870);
ctx.lineTo(447.644860, 162.022870);
ctx.lineTo(450.154860, 162.972870);
ctx.lineTo(458.394860, 167.412870);
ctx.lineTo(459.444860, 169.732870);
ctx.lineTo(461.754860, 172.362870);
ctx.lineTo(462.974860, 175.292870);
ctx.lineTo(465.344860, 177.242870);
ctx.lineTo(465.604860, 178.492870);
ctx.lineTo(464.164860, 179.332870);
ctx.lineTo(460.964860, 179.402870);
ctx.lineTo(453.274860, 180.332870);
ctx.lineTo(446.584860, 179.542870);
ctx.lineTo(439.774860, 179.462870);
ctx.lineTo(433.464860, 183.022870);
ctx.lineTo(430.444860, 183.912870);
ctx.lineTo(427.234860, 184.122870);
ctx.lineTo(425.014860, 181.082870);
ctx.lineTo(421.894860, 178.782870);
ctx.lineTo(415.054860, 169.542870);
ctx.lineTo(414.064860, 162.012870);
ctx.lineTo(416.964860, 155.052870);
ctx.lineTo(422.294860, 150.062870);
ctx.lineTo(422.304860, 146.462870);
ctx.lineTo(421.554860, 143.312870);
ctx.lineTo(419.994860, 140.642870);
ctx.lineTo(419.584860, 137.522870);
ctx.lineTo(418.904860, 134.722870);
ctx.lineTo(419.074860, 131.612870);
ctx.lineTo(417.614860, 112.802870);
ctx.lineTo(417.224860, 107.092870);
ctx.lineTo(422.784860, 107.672870);
ctx.lineTo(425.834860, 109.202870);
ctx.fill()
ctx.stroke()
ctx.closePath()
}
}
}
解决方案
推荐阅读
- sql - 根据记录与另一列关联的次数进行计数
- python - 有效地重新排列 NumPy 数组
- c++ - 如何声明具有在声明下方定义的类型的参数的函数?
- javascript - 如何解释和解决这个 webpack “ReferenceError: document is not defined” 编译错误?
- java - 当代理不可用时,如何忽略 Log4j2 Kafka appender 警告消息?
- c# - 如何将 Asp.NET 按钮与代码隐藏链接?
- algorithm - 通过对 A 和 B(含)之间的一个或多个整数进行按位或运算可以生成多少个不同的数字
- c# - HttpClient 使用 GitHub API - 基本身份验证错误 403 StatusCode
- html - 偏移文本区域的文本换行,使文本不会被图标遮挡
- azure - azure blob 存储可以使用 abfss 协议吗?还是只使用wasbs?