堆栈内存溢出
  繁体   English   中英

PHP：将代码的逻辑更改为切换图像

[英]PHP: Changing the logic of the code to switching image

 原文  2016-02-12 08:37:04  6   1    php/ jquery/ css/ wordpress/ progress-bar

问题描述

我想更改订单跟踪图的当前图像（或状态栏显示进度的img）我想更改当前图像并将状态更改为最多6（20％，40％，60％， 80％，90％100％）我已经为它制作了7张图片，

第一个代码提示 ：我希望每个百分比“ 20％，40％，60％，80％，90％100％”都有自己的图像，如果状态或百分比为20，则会显示img 20（提示/代码在下面注意：第一个代码）

下面是第2个代码：现在，它拍摄了两张图像，一幅是空白的，一幅是填充的，并显示了与给定状态的完成百分比相对应的填充图像的％宽度。 例如，对于27％完成的状态，将显示27％的填充图像。 如果创建了一个空的且已填充的图像，然后将其命名为与插件的默认图像相同，然后将其上载到插件的“ images”文件夹中，则它将使用新的图像而不是默认的图像。

该插件的订单跟踪插件链接 ： https : //wordpress.org/plugins/order-tracking/ 您可以在此处查看原始代码：订单跟踪文件夹>功能文件夹> DisplayGraph.php

这是我朋友的想法，我想实现它， 

 <style>
        .progress{
            width:50px;
            height:50px;
        }
        .class_1{
            background-image:url(/images/image1.jpg);
        }
        .class_2{
            background-image:url(/images/image2.jpg);
        }
        .class_3{
            background-image:url(/images/image3.jpg);
        }
        .class_4{
            background-image:url(/images/image4.jpg);
        }
        .class_5{
            background-image:url(/images/image5.jpg);
        }
    </style>



    <?php
        /* define your function outside of any loops */
        function setimage( $i=0 ){
            if( $i>=0 && $i<=20 ) return 'class_1';
            elseif( $i > 20 && $i <= 40 ) return 'class_2';
            elseif( $i > 40 && $i <= 60 ) return 'class_3';
            elseif( $i > 60 && $i <= 80 ) return 'class_4';
            else return 'class_5';
        }

        /* the portion of your html that displays the graphic percentage representation */
        $ReturnString .= "<div id='progress' class='progress ".setimage( $DisplayLength )."'></div>";


    ?>

这是我要更改的代码： 

<?php
function EWD_OTP_Display_Graph($OrderNumber) {
    global $wpdb;
    global $EWD_OTP_orders_table_name, $EWD_OTP_order_statuses_table_name;
    $Order = $wpdb->get_row($wpdb->prepare("SELECT * FROM $EWD_OTP_orders_table_name WHERE Order_Number='%s'", $OrderNumber));

    $Display_Graphic = get_option("EWD_OTP_Display_Graphic");
    $Statuses_Array = get_option("EWD_OTP_Statuses_Array");

    if (!is_array($Statuses_Array)) {$Statuses_Array = array();}
    foreach ($Statuses_Array as $Status_Array_Item) {if ($Status_Array_Item['Internal'] != "Yes") {$Filtered_Statuses_Array[] = $Status_Array_Item;}}
    foreach ($Filtered_Statuses_Array as $key => $Status_Array_Item) {
        if ($Order->Order_Status == $Status_Array_Item['Status']) {$CurrentStatus = $Status_Array_Item['Status']; $CurrentPercent = $Status_Array_Item['Percentage'];}
        elseif ($key == 0) {$StartingStatus = $Status_Array_Item['Status']; $StartingPercent = $Status_Array_Item['Percentage'];}
        elseif (($key+1) == sizeOf($Filtered_Statuses_Array)) {$EndingStatus = $Status_Array_Item['Status']; $EndingPercent = $Status_Array_Item['Percentage'];}
    }

    $Browser = get_user_browser();

    if ($Browser == "ie") {
            $DisplayLength = round($CurrentPercent / 100, 1) * 10;
        $ReturnString .= "<div class='ie-ewd-otp-empty-display ie-empty-graphic-" . $Display_Graphic . "'></div>";
            $ReturnString .= "<div class='ie-ewd-otp-full-display ie-full-graphic-" . $Display_Graphic . " ie-ewd-otp-display-length-" . $DisplayLength . "'></div>";
            $ReturnString .= "<div class='ie-ewd-otp-display-status' id='ie-ewd-otp-initial-status'>" . $StartingStatus . "</div>";
        $ReturnString .= "<div class='ie-ewd-otp-display-status ie-ewd-otp-current-status-length-" . $DisplayLength . "' id='ie-ewd-otp-current-status'>" . $CurrentStatus . "</div>";
        $ReturnString .= "<div class='ie-ewd-otp-display-status' id='ie-ewd-otp-ending-status'>" . $EndingStatus . "</div>";
    } else {
        if (($Display_Graphic == "Default") or ($Display_Graphic == "Streamlined") or ($Display_Graphic == "Sleek")) {  
            $DisplayLength = round($CurrentPercent / 100, 1) * 10;
            $ReturnString .= "<div class='ewd-otp-empty-display'>";
            $ReturnString .= "<img src='" . EWD_OTP_CD_PLUGIN_URL . "images/" . $Display_Graphic .".png' style='width: 100%'/></div>";
            $ReturnString .= "<div class='ewd-otp-full-display' style='width:" . $CurrentPercent . "%'>";
            $ReturnString .= "<img src='" . EWD_OTP_CD_PLUGIN_URL ."images/" . $Display_Graphic ."_Full.png' style='width: 100%; max-width: initial;'/></div>";
            $ReturnString .= "</div>";
            $ReturnString .= "<div class='ewd-otp-statuses'>";
            $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
            $ReturnString .= "<div class='ewd-otp-display-status ewd-otp-current-status-length-" . $DisplayLength . "' id='ewd-otp-current-status'>" . $CurrentStatus . "</div>";
            $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
            $ReturnString .= "</div>";
            $ReturnString .= "<div class='ewd-otp-clear'></div>";
        } else {
            if ($StartingStatus == $CurrentStatus or $EndingStatus == $CurrentStatus) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else if ($CurrentPercent >= 75 && $EndingStatus != $CurrentStatus) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: 55%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else if ($CurrentPercent <= 25) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: 5%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: " . ($CurrentPercent-20) . "%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            }
        }
    }
    return $ReturnString;
}
function get_user_browser() {
    $u_agent = $_SERVER['HTTP_USER_AGENT'];
    $ub = '';
    if(preg_match('/MSIE/i',$u_agent))
    {
        $ub = "ie";
    }
    elseif(preg_match('/Firefox/i',$u_agent))
    {
        $ub = "firefox";
    }
    elseif(preg_match('/Safari/i',$u_agent))
    {
        $ub = "safari";
    }
    elseif(preg_match('/Chrome/i',$u_agent))
    {
        $ub = "chrome";
    }
    elseif(preg_match('/Flock/i',$u_agent))
    {
        $ub = "flock";
    }
    elseif(preg_match('/Opera/i',$u_agent))
    {
        $ub = "opera";
    }
    return $ub;
}
?>

谢谢！

1 个解决方案

解决方案1
 1  2016-02-12 10:55:27

我会提出一种完全不同的方法： 临时创建条形图 。

从HTML代码的角度来看，条形图是显示或更新网页时包含的图像。 但是，在这种情况下，这些图像不是静态图像文件。 它们是由php脚本动态创建的。

好处：

  • 无缝的规模，真实的价值，而不仅仅是步骤
  • 增强功能，例如颜色，限制，网格。

缺点：

  • 要求将每次更新发送到服务器。
  • 图形图像无法预加载，每次都会传输。

下面显示的代码已创建为显示资源图，但也可以用于创建进度图。 这些图只是条形图。 有两个参数可用于简化图表。

参量

  • 宽度：图形的宽度（像素）
  • height：图形的高度（像素）
  • 价值：进度价值（百分比）
  • limit1：第一个警告限制（100值*，百分比）
  • limit2：第二个警告限制（100值*，百分比）
  • grid：是否显示网格（“ true”）（不显示“ false”或未设置参数）
  • 颜色：颜色名称，（“白色”，“黑色”，“浅灰色”，“ darkgrey”，“中间灰色”，“灰色”，“黄色”，“橙色”，“棕色”，“青色”，“洋红色之一'，'蓝色'，'深蓝色'，'绿色'，'红色'，'浅红色'）
  • rgb：RGB表示法中的颜色值； 覆盖“颜色”参数。
    红色，绿色和蓝色值可以写为十进制值（例如255）或十六进制值（例如0xFF）。
    红色，绿色和蓝色值由竖线字符（|）分隔。
    示例：rgb = 255 | 0x33 | 0x70

（*）资源消耗到相应数量时。

使用范例

您可以通过服务器端的php脚本生成<img .../>标记。 您还可以通过客户端上的一段Javascript来设置'img'元素的'src'属性。

HTML代码示例： 

<img id="progressbar" src="/bargraph.php?width=180&height=12&value=33&color=blue&grid=false" alt="Progress" />

示例JavaScript代码： 

var progress = 0;

function setProgressBar(id,progress) {
  var elem = document.getElementById(id);
  if (var) var.src = "/bargraph.php?width=180&height=12&value=" + progress + "&color=blue&grid=true";
}

// Maybe periodically do ...
progress += 5;
setProgressBar("progressbar", progress);
// ...

看起来如何（带有网格）：

在此处输入图片说明

代码（bargraph.php） 

<?php
// We honor both request methods (GET/POST)
$params = array();
foreach($_REQUEST as $key => $value) $params[strtolower($key)] = $value;

// Assume default values if necessary
$wd = (empty($params{'width'})) ? 40 : (integer)$params{'width'};
$hg = (empty($params{'height'})) ? 8 : (integer)$params{'height'};
$vl = (empty($params{'value'})) ? 0 : (integer)$params{'value'};
$l1 = (empty($params{'limit1'})) ? 0 : 100-(integer)$params{'limit1'};
$l2 = (empty($params{'limit2'})) ? 0 : 100-(integer)$params{'limit2'};
$gr = (empty($params{'grid'})) ? 0 : ( (strtolower($params{'grid'})=='true') ? 1 : 0) ;

// Set grid parameters
define('numgrid',10);
if ($gr) {
    $xd = floor($wd / numgrid); $wd = $xd * numgrid;
    $wd0 = $wd;
    $wd -= 1;
} else {
    $xd = 0;
    $wd0 = $wd;
}

// Create the image
$img = imagecreatetruecolor($wd,$hg);

// Define color palette
$colors = array(
    'white' => imagecolorallocate($img,0xFF,0xFF,0xFF),
    'black' => imagecolorallocate($img,0,0,0),
    'lightgrey' => imagecolorallocate($img,0xE0,0xE0,0xE0),
    'darkgrey' => imagecolorallocate($img,0x66,0x66,0x66),
    'midgrey' => imagecolorallocate($img,0x99,0x99,0x99),
    'grey' => imagecolorallocate($img,0xC0,0xC0,0xC0),
    'yellow' => imagecolorallocate($img,0xFF,0xFF,0x00),
    'orange' => imagecolorallocate($img,0xFF,0xD7,0x00),
    'brown' => imagecolorallocate($img,0x66,0x66,0x00),
    'cyan' => imagecolorallocate($img,0x00,0xc0,0xc0),
    'magenta' => imagecolorallocate($img,0xc0,0x00,0x90),
    'blue' => imagecolorallocate($img,0x00,0x00,0xc0),
    'darkblue' => imagecolorallocate($img,0x00,0x51,0x8C),
    'green' => imagecolorallocate($img,0x00,0xc0, 0x00),
    'red' => imagecolorallocate($img,0xCC,0x00, 0x00),
    'lightred' => imagecolorallocate($img,0xFF,0x33, 0x33),
);
if (isset($params['rgb']) && !empty($params['rgb'])) {
    $col = explode('|',$params['rgb']);
    if (count($col)==3) {
        $colors['rgb'] = imagecolorallocate($img,$col[0],$col[1],$col[2]);
        $params['color']='rgb';
    }
}

// Evaluate colors 
$params['color']= strtolower($params['color']);
$lim1_color = $colors['yellow'];
$lim2_color = $colors['lightred'];
$color = (isset($params['color']) && isset($colors[$params['color']]))  
    ? $params['color']
    : 'cyan';
$active_color = $colors[$color];
if ($gr) {
    $inactive_color = $colors['grey'];
    $background_color = ($color=='midgreay') 
        ? $colors['lightgreay'] 
        : $colors['midgrey'];
    $delim_color = $colors['white'];
} else {
    $inactive_color =  $colors['white'];
    $background_color = $colors['grey'];
}


// Fill image with active / inactive colors
$x1 = 0; $y1 = 0;
if (($wd>3) && ($hg>3)) {
    imagefill($img,0,0,$background_color);
    imagefilledrectangle ($img,$x1+1,$y1+1,$wd0-2,$hg-2,$inactive_color);
} else {
    imagefill($img,0,0,$inactive_color);
}
$x2 = ceil(($wd0 / 100) * $vl);
if ($x2>0) { imagefilledrectangle ($img,$x1,$y1,$x2-1,$hg-1,$active_color); }
// Paint grid and limit bars
if ($gr) {
    for ($i = 0; $i <= (numgrid); $i++) {
        $x1 = ($i * $xd);
            imageline($img,$x1,0,$x1,$hg-1,$delim_color);
    }
}
if ($l1) { $x2 = ceil(($wd0 / 100) * $l1); imageline($img,$x2,0,$x2,$hg-1,$lim1_color); }
if ($l2) { $x2 = ceil(($wd0 / 100) * $l2); imageline($img,$x2,0,$x2,$hg-1,$lim2_color); }

// Avoid caching
header("Expires: Mon, 01 Jan 1999 00:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // Always modified
header("Cache-Control: private, no-store, no-cache, must-revalidate"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0

// Send out, then destroy the image
header("Content-type: image/png");
imagepng($img);
imagedestroy($img);
?>

当然，您可以修改代码以更改条形图最终的外观。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 php 用于编辑和更改图像的代码 php if代码背后的逻辑 PHP代码逻辑按版本 PHP代码背后的逻辑 PHP排序导致代码逻辑 php逻辑问题：上传文件和更改名称 了解Calendar PHP的代码逻辑 PHP更改图像文件名 切换到mysqli时，PHP代码不再起作用 将 PHP 代码从 Apache 切换到 Nginx 的问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM