合理使用Label的backgroundImage的属性

博客给出一段代码,定义了一个名为SetInpanel的公共方法,用于设置Panel。方法接收拼音、汉字和面板宽度作为参数,在方法内部创建了一个Panel对象,并根据传入的宽度计算高度,还创建了一个Label对象用于显示拼音。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

public Panel SetInpanel(string Pinyin,string Zi,int WidthPanel)
{
Panel PanelOut = new Panel();
int HeigetPanel = WidthPanel * 3 / 2;
PanelOut.Height = HeigetPanel;
PanelOut.Width = WidthPanel;
Label LabelPingyin = new Label();
LabelPingyin…AutoSize =true;//取消自动大小
LabelPingyin.Height = HeigetPanel / 3;
LabelPingyin.Width =WidthPanel;

        LabelPingyin.Location = new Point(0, 0);
        LabelPingyin.Text = Pinyin;
        LabelPingyin.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Left | System.Windows.Forms.AnchorStyles.Right))); 

        Label labelZi = new Label();
        labelZi.AutoSize = false;//取消自动大小
        labelZi.Height = HeigetPanel*2 / 3; 
        labelZi.Width = labelZi.Height;
        labelZi.Location = new Point(0, LabelPingyin.Height);
        labelZi.Text = Zi;
        labelZi.BackgroundImage = Properties.Resources.田字格;//label也有背景图片的属性
        labelZi.BackgroundImageLayout = ImageLayout.Stretch;//当然有这拉伸咯。
        PanelOut.Controls.Add(LabelPingyin);
        PanelOut.Controls.Add(labelZi);
        return PanelOut;

        // labelZi.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Left | System.Windows.Forms.AnchorStyles.Right)));



    }

拼音加田字格

showDevicesOnMap(devices) { this.clearDeviceMarkers(); console.log("位置--===", devices); devices.forEach((device, index) => { const { longitude, latitude } = device; const markerElement = document.createElement("div"); markerElement.style.position = "relative"; markerElement.style.width = "24px"; markerElement.style.height = "30px"; // 设备图标 const icon = document.createElement("div"); icon.style.width = "30px"; icon.style.height = "20px"; icon.style.backgroundImage = device.online ? 'url("/images/jk_online.png")' : 'url("/images/jk_unline.png")'; icon.style.backgroundSize = "100% 100%"; icon.style.backgroundRepeat = "no-repeat"; icon.style.position = "absolute"; // 改为绝对定位 icon.style.bottom = "0"; // 贴在底部 markerElement.appendChild(icon); // 序号标签 const label = document.createElement("div"); label.textContent = index + 1; label.style.position = "absolute"; label.style.top = "-10px"; label.style.left = "50%"; label.style.transform = "translateX(-50%)"; label.style.backgroundColor = this.selectedDeviceId === device.id ? "#FF6666" : "#45CCDA"; label.style.color = "white"; label.style.borderRadius = "50%"; label.style.width = "20px"; label.style.height = "20px"; label.style.textAlign = "center"; label.style.lineHeight = "20px"; label.style.fontSize = "12px"; label.style.zIndex = "10"; // 确保标签在最上层 markerElement.appendChild(label); // 计算图标实际尺寸 const iconHeight = 30; // 图标高度(包含标签) // 直接使用原始坐标,不进行任何偏移计算 const marker = new minemap.Marker(markerElement, { offset: [0, -iconHeight / 2], // 垂直偏移补偿 anchor: "center", // 使用中心定位 }) .setLngLat([longitude, latitude]) // 直接使用原始坐标 .addTo(this.mapObj); // 点击事件 markerElement.addEventListener("click", (e) => { e.stopPropagation(); this.toggleDeviceSelection(device.id, label); }); this.deviceMarkers.push({ marker, device, label }); }); // 创建新的数据源 // const dataSource = { // type: "FeatureCollection", // features: devices.map((device) => ({ // id: device.id, // type: "Feature", // geometry: { // type: "Point", // coordinates: [device.longitude, device.latitude], // }, // properties: { // ...device, // title: device.name, // "custom-image": device.online ? "jk_online" : "jk_unline", // index: device.index || 1, // 添加序号属性 // }, // })), // }; // // 设置数据源 // const mapSource = this.mapObj.getSource("data-point"); // mapSource.setData(dataSource); },latitude : "37.985111" longitude : "106.216199"坐标点大概都是这个范围内的,为什么上图的图标会竖向排列而且缩放偏移线路位置,怎么修改才能让这些坐标在线路周围正常显示,给我最详细的代码修改
07-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值