【PaddleHub模型贡献】一行代码实现水表的数字表盘分割

本文介绍将水表数字表盘分割模型贡献到PaddleHub的方法。先安装必要库,复现模型:准备数据集,配置GPU,定义图像预处理流程和数据集,用DeepLabv3p训练模型并导出。接着转换模型为PaddleHub模型,补充代码实现旋转剪裁等功能,最后测试安装与调用,实现水表数字表盘分割。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

【paddlehub模型贡献】一行代码实现水表的数字表盘分割 - 创想鸟

【PaddleHub模型贡献】一行代码实现水表的数字表盘分割

一、安装必要的库

In [3]

!pip install paddlex -i https://mirror.baidu.com/pypi/simple!pip install --upgrade paddlepaddle-gpu -i https://pypi.tuna.tsinghua.edu.cn/simple!pip install --upgrade paddlehub==2.0.1 -i https://pypi.tuna.tsinghua.edu.cn/simple

   

二、模型训练

项目作者使用PaddleX做的语义分割,因为作者没有直接公开训练好的模型,所以这里我们先按照作者的思路复现模型。

1.准备表盘数据集

In [ ]

!unzip -oq /home/aistudio/data/data73852/water.zip

   

2. 模型训练

2.1 配置GPU

In [ ]

# 设置使用0号GPU卡(如无GPU,执行此代码后仍然会使用CPU训练模型)import matplotlibmatplotlib.use('Agg') import osos.environ['CUDA_VISIBLE_DEVICES'] = '0'import paddlex as pdx

   

2.2 定义图像预处理流程transforms

定义数据处理流程,其中训练和测试需分别定义,训练过程包括了部分测试过程中不需要的数据增强操作,如在本示例中,训练过程使用了RandomHorizontalFlip和RandomPaddingCrop两种数据增强方式,更多图像预处理流程transforms的使用可参见paddlex.seg.transforms。

In [ ]

from paddlex.seg import transformstrain_transforms = transforms.Compose([    transforms.RandomHorizontalFlip(),    transforms.Resize(target_size=512),    transforms.RandomPaddingCrop(crop_size=500),    transforms.Normalize()])eval_transforms = transforms.Compose([    transforms.Resize(512),    transforms.Normalize()])

   

2.3 定义数据集Dataset

实例分割使用SegDataset格式的数据集,因此采用pdx.datasets.SegDataset来加载数据集,该接口的介绍可参见文档pdx.datasets.SegDataset。

In [ ]

train_dataset = pdx.datasets.SegDataset(    data_dir='water',    file_list='water/train.txt',    label_list='water/class_names.txt',    transforms=train_transforms,    shuffle=True)eval_dataset = pdx.datasets.SegDataset(    data_dir='water',    file_list='water/val.txt',    label_list='water/class_names.txt',    transforms=eval_transforms)

       

2021-03-11 14:54:48 [INFO]150 samples in file water/train.txt2021-03-11 14:54:48 [INFO]11 samples in file water/val.txt

       

2.4 模型开始训练

使用本数据集在P40上训练,如有GPU,模型的训练过程预估为13分钟左右;如无GPU,则预估为5小时左右。更多训练模型的参数可参见文档paddlex.seg.DeepLabv3p。模型训练过程每间隔save_interval_epochs轮会保存一次模型在save_dir目录下,同时在保存的过程中也会在验证数据集上计算相关指标,具体相关日志参见文档。

In [ ]

num_classes = len(train_dataset.labels)model = pdx.seg.DeepLabv3p(num_classes=num_classes)model.train(    num_epochs=40,    train_dataset=train_dataset,    train_batch_size=4,    eval_dataset=eval_dataset,    learning_rate=0.01,    save_interval_epochs=1,    # pretrain_weights='output/deeplab4/best_model',    save_dir='output/water')

   

最后一轮的输出如下所示:

2021-03-11 15:02:56 [INFO][TRAIN] Epoch=40/40, Step=1/37, loss=0.010831, lr=0.000362, time_each_step=0.18s, eta=0:0:102021-03-11 15:02:56 [INFO][TRAIN] Epoch=40/40, Step=3/37, loss=0.010944, lr=0.000344, time_each_step=0.2s, eta=0:0:102021-03-11 15:02:57 [INFO][TRAIN] Epoch=40/40, Step=5/37, loss=0.009099, lr=0.000326, time_each_step=0.22s, eta=0:0:102021-03-11 15:02:57 [INFO][TRAIN] Epoch=40/40, Step=7/37, loss=0.011186, lr=0.000308, time_each_step=0.24s, eta=0:0:102021-03-11 15:02:57 [INFO][TRAIN] Epoch=40/40, Step=9/37, loss=0.008269, lr=0.00029, time_each_step=0.25s, eta=0:0:102021-03-11 15:02:58 [INFO][TRAIN] Epoch=40/40, Step=11/37, loss=0.011792, lr=0.000272, time_each_step=0.25s, eta=0:0:102021-03-11 15:02:58 [INFO][TRAIN] Epoch=40/40, Step=13/37, loss=0.010976, lr=0.000254, time_each_step=0.26s, eta=0:0:92021-03-11 15:02:58 [INFO][TRAIN] Epoch=40/40, Step=15/37, loss=0.01399, lr=0.000236, time_each_step=0.26s, eta=0:0:92021-03-11 15:02:58 [INFO][TRAIN] Epoch=40/40, Step=17/37, loss=0.009998, lr=0.000217, time_each_step=0.26s, eta=0:0:82021-03-11 15:02:58 [INFO][TRAIN] Epoch=40/40, Step=19/37, loss=0.012266, lr=0.000198, time_each_step=0.26s, eta=0:0:82021-03-11 15:02:58 [INFO][TRAIN] Epoch=40/40, Step=21/37, loss=0.011713, lr=0.00018, time_each_step=0.13s, eta=0:0:52021-03-11 15:02:58 [INFO][TRAIN] Epoch=40/40, Step=23/37, loss=0.010291, lr=0.00016, time_each_step=0.11s, eta=0:0:52021-03-11 15:02:58 [INFO][TRAIN] Epoch=40/40, Step=25/37, loss=0.010211, lr=0.000141, time_each_step=0.09s, eta=0:0:42021-03-11 15:02:59 [INFO][TRAIN] Epoch=40/40, Step=27/37, loss=0.02097, lr=0.000121, time_each_step=0.08s, eta=0:0:42021-03-11 15:02:59 [INFO][TRAIN] Epoch=40/40, Step=29/37, loss=0.008198, lr=0.000101, time_each_step=0.07s, eta=0:0:32021-03-11 15:02:59 [INFO][TRAIN] Epoch=40/40, Step=31/37, loss=0.010346, lr=8.1e-05, time_each_step=0.06s, eta=0:0:32021-03-11 15:02:59 [INFO][TRAIN] Epoch=40/40, Step=33/37, loss=0.009331, lr=6e-05, time_each_step=0.06s, eta=0:0:32021-03-11 15:02:59 [INFO][TRAIN] Epoch=40/40, Step=35/37, loss=0.01259, lr=3.8e-05, time_each_step=0.06s, eta=0:0:32021-03-11 15:02:59 [INFO][TRAIN] Epoch=40/40, Step=37/37, loss=0.013072, lr=1.4e-05, time_each_step=0.06s, eta=0:0:32021-03-11 15:02:59 [INFO][TRAIN] Epoch 40 finished, loss=0.011522, lr=0.000195 .2021-03-11 15:02:59 [INFO]Start to evaluating(total_samples=11, total_steps=3)...100%|██████████| 3/3 [00:02<00:00,  1.00it/s]2021-03-11 15:03:02 [INFO][EVAL] Finished, Epoch=40, miou=0.814756, category_iou=[0.99168644 0.63782582], oacc=0.991806, category_acc=[0.99431391 0.84710874], kappa=0.774722, category_F1-score=[0.99582587 0.77886893] .2021-03-11 15:03:03 [INFO]Model saved in output/water/epoch_40.2021-03-11 15:03:03 [INFO]Current evaluated best model in eval_dataset is epoch_35, miou=0.8284633456567256

   

3.模型导出

模型训练时会自动保存模型参数,我们需要把训练模型导出成可预测模型。

In [ ]

!paddlex --export_inference --model_dir=output/water/best_model --save_dir=./inference_model

       

/opt/conda/envs/python35-paddle120-env/lib/python3.7/site-packages/setuptools/depends.py:2: DeprecationWarning: the imp module is deprecated in favour of importlib; see the module's documentation for alternative uses  import impW0311 15:49:28.613981   782 device_context.cc:362] Please NOTE: device: 0, GPU Compute Capability: 7.0, Driver API Version: 11.0, Runtime API Version: 10.1W0311 15:49:28.618839   782 device_context.cc:372] device: 0, cuDNN Version: 7.6.2021-03-11 15:49:32 [INFO]Model[DeepLabv3p] loaded.2021-03-11 15:49:32 [INFO]Model for inference deploy saved in ./inference_model.

       

三、封装Module

下面正式开始模型转换!

1.模型转换

PaddleX模型可以快速转换成PaddleHub模型,只需要用下面这一句命令即可:

In [ ]

!hub convert --model_dir inference_model               --module_name WatermeterSegmentation               --module_version 1.0.0               --output_dir outputs

   

转换成功后的模型保存在outputs文件夹下,我们解压一下:

In [ ]

!gzip -dfq /home/aistudio/outputs/WatermeterSegmentation.tar.gz!tar -xf /home/aistudio/outputs/WatermeterSegmentation.tar

   

2.补充代码

刚刚转换的模型其实已经是PaddleHub的Module了,但是原项目中,作者做了一些图片的裁剪等操作,把数字提取出来了,因此,我们需要把这部分代码补充进去。

完整的module.py文件内容如下:

from __future__ import absolute_importfrom __future__ import divisionimport osimport cv2import argparseimport base64import paddlex as pdxfrom math import *import time, math, reimport numpy as npimport paddlehub as hubfrom paddlehub.module.module import moduleinfo, runnable, servingdef base64_to_cv2(b64str):    data = base64.b64decode(b64str.encode('utf8'))    data = np.fromstring(data, np.uint8)    data = cv2.imdecode(data, cv2.IMREAD_COLOR)    return datadef cv2_to_base64(image):    # return base64.b64encode(image)    data = cv2.imencode('.jpg', image)[1]    return base64.b64encode(data.tostring()).decode('utf8')def read_images(paths):    images = []    for path in paths:        images.append(cv2.imread(path))    return images'''旋转图像并剪裁'''def rotate(        img,  # 图片        pt1, pt2, pt3, pt4,        imgOutSrc):    # print(pt1,pt2,pt3,pt4)    withRect = math.sqrt((pt4[0] - pt1[0]) ** 2 + (pt4[1] - pt1[1]) ** 2)  # 矩形框的宽度    heightRect = math.sqrt((pt1[0] - pt2[0]) ** 2 + (pt1[1] - pt2[1]) **2)    # print("矩形的宽度",withRect, "矩形的高度", heightRect)    angle = acos((pt4[0] - pt1[0]) / withRect) * (180 / math.pi)  # 矩形框旋转角度    # print("矩形框旋转角度", angle)    if withRect > heightRect:        if pt4[1]>pt1[1]:            # print("顺时针旋转")            pass        else:            # print("逆时针旋转")            angle=-angle    else:        # print("逆时针旋转")        angle=90 - angle    height = img.shape[0]  # 原始图像高度    width = img.shape[1]   # 原始图像宽度    rotateMat = cv2.getRotationMatrix2D((width / 2, height / 2), angle, 1)  # 按angle角度旋转图像    heightNew = int(width * fabs(sin(radians(angle))) + height * fabs(cos(radians(angle))))    widthNew = int(height * fabs(sin(radians(angle))) + width * fabs(cos(radians(angle))))    rotateMat[0, 2] += (widthNew - width) / 2    rotateMat[1, 2] += (heightNew - height) / 2    imgRotation = cv2.warpAffine(img, rotateMat, (widthNew, heightNew), borderValue=(255, 255, 255))    # cv2.imwrite("imgRotation.jpg", imgRotation)     # 旋转后图像的四点坐标    [[pt1[0]], [pt1[1]]] = np.dot(rotateMat, np.array([[pt1[0]], [pt1[1]], [1]]))    [[pt3[0]], [pt3[1]]] = np.dot(rotateMat, np.array([[pt3[0]], [pt3[1]], [1]]))    [[pt2[0]], [pt2[1]]] = np.dot(rotateMat, np.array([[pt2[0]], [pt2[1]], [1]]))    [[pt4[0]], [pt4[1]]] = np.dot(rotateMat, np.array([[pt4[0]], [pt4[1]], [1]]))    # 处理反转的情况    if pt2[1]>pt4[1]:        pt2[1],pt4[1]=pt4[1],pt2[1]    if pt1[0]>pt3[0]:        pt1[0],pt3[0]=pt3[0],pt1[0]    imgOut = imgRotation[int(pt2[1]):int(pt4[1]), int(pt1[0]):int(pt3[0])]    cv2.imwrite(imgOutSrc, imgOut) # 裁减得到的旋转矩形框@moduleinfo(    name='WatermeterSegmentation',    type='CV/semantic_segmentatio',    author='郑博培、彭兆帅',    author_email='2733821739@qq.com',    summary='Digital dial segmentation of water meter',    version='1.0.0')class MODULE(hub.Module):    def _initialize(self, **kwargs):        self.default_pretrained_model_path = os.path.join(            self.directory, 'assets')        self.model = pdx.deploy.Predictor(self.default_pretrained_model_path,                                          **kwargs)    def predict(self,                images=None,                paths=None,                data=None,                batch_size=1,                use_gpu=False,                **kwargs):        all_data = images if images is not None else read_images(paths)        total_num = len(all_data)        loop_num = int(np.ceil(total_num / batch_size))        res = []        for iter_id in range(loop_num):            batch_data = list()            handle_id = iter_id * batch_size            for image_id in range(batch_size):                try:                    batch_data.append(all_data[handle_id + image_id])                except IndexError:                    break            out = self.model.batch_predict(batch_data, **kwargs)            res.extend(out)        return res    def cutPic(self, picUrl):        # seg = hub.Module(name='WatermeterSegmentation')        image_name = picUrl        im = cv2.imread(image_name)        result = self.predict(images=[im])        # 将多边形polygon转矩形        contours, hier = cv2.findContours(result[0]['label_map'], cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)         print(type(contours[0]))        n = 0        m = 0        for index,contour in enumerate(contours):            if len(contour) > n:                n = len(contour)                m = index        image = cv2.imread(image_name)        # 获取最小的矩形        rect = cv2.minAreaRect(contours[m])        box = np.int0(cv2.boxPoints(rect))        # 获取到矩形的四个点        tmp = cv2.drawContours(image, [box], 0, (0, 0, 255), 3)        imgOutSrc = 'result.jpg'        rotate(image, box[0], box[1], box[2], box[3], imgOutSrc)        res = []        res.append(imgOutSrc)        return res    @serving    def serving_method(self, images, **kwargs):        """        Run as a service.        """        images_decode = [base64_to_cv2(image) for image in images]        results = self.predict(images_decode, **kwargs)        res = []        for result in results:            if isinstance(result, dict):                # result_new = dict()                for key, value in result.items():                    if isinstance(value, np.ndarray):                        result[key] = cv2_to_base64(value)                    elif isinstance(value, np.generic):                        result[key] = np.asscalar(value)            elif isinstance(result, list):                for index in range(len(result)):                    for key, value in result[index].items():                        if isinstance(value, np.ndarray):                            result[index][key] = cv2_to_base64(value)                        elif isinstance(value, np.generic):                            result[index][key] = np.asscalar(value)            else:                raise RuntimeError('The result cannot be used in serving.')            res.append(result)        return res    @runnable    def run_cmd(self, argvs):        """        Run as a command.        """        self.parser = argparse.ArgumentParser(            description="Run the {} module.".format(self.name),            prog='hub run {}'.format(self.name),            usage='%(prog)s',            add_help=True)        self.arg_input_group = self.parser.add_argument_group(            title="Input options", description="Input data. Required")        self.arg_config_group = self.parser.add_argument_group(            title="Config options",            description=            "Run configuration for controlling module behavior, not required.")        self.add_module_config_arg()        self.add_module_input_arg()        args = self.parser.parse_args(argvs)        results = self.predict(            paths=[args.input_path],            use_gpu=args.use_gpu)        return results    def add_module_config_arg(self):        """        Add the command config options.        """        self.arg_config_group.add_argument(            '--use_gpu',            type=bool,            default=False,            help="whether use GPU or not")    def add_module_input_arg(self):        """        Add the command input options.        """        self.arg_input_group.add_argument(            '--input_path', type=str, help="path to image.")if __name__ == '__main__':    module = MODULE(directory='./new_model')    images = [cv2.imread('./cat.jpg'), cv2.imread('./cat.jpg'), cv2.imread('./cat.jpg')]    res = module.predict(images=images)

   

3.模型测试

首先安装我们刚刚写好的Module:

In [ ]

!hub install WatermeterSegmentation

       

/opt/conda/envs/python35-paddle120-env/lib/python3.7/site-packages/setuptools/depends.py:2: DeprecationWarning: the imp module is deprecated in favour of importlib; see the module's documentation for alternative uses  import imp/opt/conda/envs/python35-paddle120-env/lib/python3.7/site-packages/matplotlib/__init__.py:107: DeprecationWarning: Using or importing the ABCs from 'collections' instead of from 'collections.abc' is deprecated, and in 3.8 it will stop working  from collections import MutableMapping/opt/conda/envs/python35-paddle120-env/lib/python3.7/site-packages/matplotlib/rcsetup.py:20: DeprecationWarning: Using or importing the ABCs from 'collections' instead of from 'collections.abc' is deprecated, and in 3.8 it will stop working  from collections import Iterable, Mapping/opt/conda/envs/python35-paddle120-env/lib/python3.7/site-packages/matplotlib/colors.py:53: DeprecationWarning: Using or importing the ABCs from 'collections' instead of from 'collections.abc' is deprecated, and in 3.8 it will stop working  from collections import Sized[2021-03-11 16:42:50,225] [    INFO] - Successfully uninstalled WatermeterSegmentation[2021-03-11 16:42:50,441] [    INFO] - Successfully installed WatermeterSegmentation-1.0.0

       

模型调用:

In [4]

import cv2import paddlehub as hubseg = hub.Module(name='WatermeterSegmentation')res = seg.cutPic(picUrl="water/images/val/20200521105032.png")

       

[2021-03-11 17:13:36,113] [ WARNING] - The _initialize method in HubModule will soon be deprecated, you can use the __init__() to handle the initialization of the object

       


       

预测结果如下。

输入图片:

【PaddleHub模型贡献】一行代码实现水表的数字表盘分割 - 创想鸟        

最终将截取的图片显示效果如下:

【PaddleHub模型贡献】一行代码实现水表的数字表盘分割 - 创想鸟        

以上就是【PaddleHub模型贡献】一行代码实现水表的数字表盘分割的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/63451.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月11日 12:19:38
下一篇 2025年11月11日 12:40:00

相关推荐

  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何解决本地图片在使用 mask JS 库时出现的跨域错误?

    如何跨越localhost使用本地图片? 问题: 在本地使用mask js库时,引入本地图片会报跨域错误。 解决方案: 要解决此问题,需要使用本地服务器启动文件,以http或https协议访问图片,而不是使用file://协议。例如: python -m http.server 8000 然后,可以…

    2025年12月24日
    200
  • 旋转长方形后,如何计算其相对于画布左上角的轴距?

    绘制长方形并旋转,计算旋转后轴距 在拥有 1920×1080 画布中,放置一个宽高为 200×20 的长方形,其坐标位于 (100, 100)。当以任意角度旋转长方形时,如何计算它相对于画布左上角的 x、y 轴距? 以下代码提供了一个计算旋转后长方形轴距的解决方案: const x = 200;co…

    2025年12月24日
    000
  • 旋转长方形后,如何计算它与画布左上角的xy轴距?

    旋转后长方形在画布上的xy轴距计算 在画布中添加一个长方形,并将其旋转任意角度,如何计算旋转后的长方形与画布左上角之间的xy轴距? 问题分解: 要计算旋转后长方形的xy轴距,需要考虑旋转对长方形宽高和位置的影响。首先,旋转会改变长方形的长和宽,其次,旋转会改变长方形的中心点位置。 求解方法: 计算旋…

    2025年12月24日
    000
  • 旋转长方形后如何计算其在画布上的轴距?

    旋转长方形后计算轴距 假设长方形的宽、高分别为 200 和 20,初始坐标为 (100, 100),我们将它旋转一个任意角度。根据旋转矩阵公式,旋转后的新坐标 (x’, y’) 可以通过以下公式计算: x’ = x * cos(θ) – y * sin(θ)y’ = x * …

    2025年12月24日
    000
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 如何计算旋转后长方形在画布上的轴距?

    旋转后长方形与画布轴距计算 在给定的画布中,有一个长方形,在随机旋转一定角度后,如何计算其在画布上的轴距,即距离左上角的距离? 以下提供一种计算长方形相对于画布左上角的新轴距的方法: const x = 200; // 初始 x 坐标const y = 90; // 初始 y 坐标const w =…

    2025年12月24日
    200
  • CSS元素设置em和transition后,为何载入页面无放大效果?

    css元素设置em和transition后,为何载入无放大效果 很多开发者在设置了em和transition后,却发现元素载入页面时无放大效果。本文将解答这一问题。 原问题:在视频演示中,将元素设置如下,载入页面会有放大效果。然而,在个人尝试中,并未出现该效果。这是由于macos和windows系统…

    2025年12月24日
    200
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 如何计算旋转后的长方形在画布上的 XY 轴距?

    旋转长方形后计算其画布xy轴距 在创建的画布上添加了一个长方形,并提供其宽、高和初始坐标。为了视觉化旋转效果,还提供了一些旋转特定角度后的图片。 问题是如何计算任意角度旋转后,这个长方形的xy轴距。这涉及到使用三角学来计算旋转后的坐标。 以下是一个 javascript 代码示例,用于计算旋转后长方…

    2025年12月24日
    000
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000
  • 如何用前端实现 Windows 10 设置界面的鼠标移动探照灯效果?

    如何在前端实现 Windows 10 设置界面中的鼠标移动探照灯效果 想要在前端开发中实现 Windows 10 设置界面中类似的鼠标移动探照灯效果,可以通过以下途径: CSS 解决方案 DEMO 1: Windows 10 网格悬停效果:https://codepen.io/tr4553r7/pe…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信